本文共 4746 字，大约阅读时间需要 15 分钟。
flexbox布局
The CSS Flexible Box Layout — Flexbox — provides a simple solution to the design and layout problems designers and developers have faced with CSS. Let me show you how to use it to generate some common layouts and challenges that you will face in designing a responsive website design.
CSS灵活框布局(Flexbox)为设计人员和开发人员使用CSS所面临的设计和布局问题提供了简单的解决方案。 让我向您展示如何使用它来生成一些常见的布局和设计响应式网站设计时将面临的挑战。
I assume you already know the basis of Flexbox. If not there are many documents teaching you about Flexbox. I would recommend .
我假设您已经知道Flexbox的基础。 如果没有，那么有很多文档可以教您关于Flexbox的知识。 我建议您 。
In this article, I am going to show you how to make 7 different layouts using FlexBox.
在本文中，我将向您展示如何使用FlexBox制作7种不同的布局。
All of the examples that I am going to show can be . The code for every example is just html and css. I have created a master homepage that provides a link to every example that we are going to cover.
我要显示的所有示例都可以 。 每个示例的代码都是html和CSS。 我创建了一个母版主页，该主页提供了指向我们将要介绍的每个示例的链接。
Every website has a navigation. Using Flexbox you can create a navigation that has your company name on the left and menu items on the right.
每个网站都有导航。 使用Flexbox，您可以创建一个导航，该导航的公司名称在左侧，菜单项在右侧。
To accomplish this layout in CSS, you would have to use floats to get some content to appear on the left and the rest of the content to appear on the right.
要在CSS中完成此布局，您将必须使用浮点数使一些内容显示在左侧，而其余内容显示在右侧。
With FlexBox you have to specify a flex container that contains the navigation. The company name on the left is a flex item within this container.
使用FlexBox，您必须指定一个包含导航的flex容器。 左侧的公司名称是此容器中的弹性项目。
The menu items on the right are their own flex container with a <ul> containing all the menu items.
右侧的菜单项是它们自己的flex容器，带有<ul>，其中包含所有菜单项。
Here is the html for the navigation:
这是导航的html：
Here is the CSS for the navigation:
这是导航CSS：
Many websites include a full size image. Usually this image contains text that is centered on the screen.
许多网站都包含完整尺寸的图片。 通常，此图像包含在屏幕上居中的文本。
The challenge is styling the image so that it fits full page regardless of whether you are viewing this on a wide screen monitor, laptop, tablet or phone and have the CSS remain centered on the screen. Flexbox makes it easy to do this. To mimic text centered on the screen I have included a button
挑战在于对图像进行样式设置，以使其适合整个页面，无论您是在宽屏显示器，笔记本电脑，平板电脑还是手机上查看图像，并且CSS始终位于屏幕中央。 Flexbox使其易于执行此操作。 为了模仿屏幕上居中的文本，我添加了一个按钮
Here is the html to center an image on the screen:
这是将图像放在屏幕中央的html：
Here is the css to center an image on the screen:
这是使图像在屏幕上居中CSS：
Almost every website has the same layout which contains a navigation across the top and a footer at the bottom. In between there are 3 columns consisting or a right and left sidebar and the main content area. Generally the main content area takes up 60% of the width of the screen and the two sidebars are allocated 20% of the screen each.
几乎每个网站都具有相同的布局，其中包含顶部的导航和底部的页脚。 在它们之间有3列，分别是左右边栏和主要内容区域。 通常，主要内容区域占据屏幕宽度的60％，两个侧边栏分别分配给屏幕的20％。
The challenge for creating a responsive website is having the footer stay at the bottom of the page regardless of how much content is displayed. The content area should scroll if there is more than can be displayed on the page.
创建响应式网站的挑战在于，无论显示多少内容，页脚都位于页面底部。 如果页面上显示的内容超出范围，则内容区域应滚动。
Here is the html for the responsive website layout:
这是响应式网站布局的html：
Here is the css code for the responsive website layout:
这是响应式网站布局CSS代码：
To improve your user experience, many designers prefer to put images or text in their input fields. This provides the user with directions on what should be included in the field.
为了改善您的用户体验，许多设计师更喜欢将图像或文本放在其输入字段中。 这为用户提供了有关该字段应包含的内容的指导。
With traditional CSS that was very challenging and required you to use a table format to insert something before or after an input field. With Flexbox it is much easier.
对于传统CSS来说，这非常具有挑战性，需要您使用表格格式在输入字段之前或之后插入内容。 使用Flexbox会容易得多。
Here is the html code for the addon for input fields:
这是用于输入字段的插件的html代码：
Here is the css code for addon for input field:
这是输入字段的插件CSS代码：
It is very common for websites to include a 3 column layout on the screen.
网站在屏幕上包含3列布局是很常见的。
Here is the html for a 3 column layout:
这是3列布局的html：
Here is the css for the 3 column layout:
这是3列布局CSS：
Thanks for reading my article. If you like it, please click on clap icon below so that others will find the article. Here are some more of my articles that you might be interested in:
感谢您阅读我的文章。 如果喜欢，请单击下面的拍手图标，以便其他人可以找到该文章。 以下是您可能感兴趣的其他一些文章：
翻译自:
flexbox布局
转载地址：http://tzyzd.baihongyu.com/