原文链接： https://bocoup.com/weblog/dive-into-flexbox
本文正在翻译中，你可以理解为我不小心手贱点错发出去了，也可以理解为我为了让等得心焦的同学先睹为快，所以把翻译 过程暴露给大家。无论如何希望您看着爽，您爽快了加薪升职了说不定也打赏我个老婆本儿是不？如果您看着不爽，请使劲拍砖。注意，仅限技术错误和文法错误，不允许人身攻击。
Flexbox 是 CSS3 中提出的新布局模型，用于适应现代网络开发中日益复杂的布局需求。 近来，Flexbox 的语法逐渐稳定下来，本文来为大家揭开它的神秘面纱，并盘点其技术细节。浏览器支持将会快速增长，因此当对 Flexbox 的支持足够广泛以至达到实用水平时，你将会在这场游戏当中拔得头筹。如果想要了解它的工作方式和原理，那么就继续读下去吧！
长期以来，人们使用 table、float、inline-block 以及其他 CSS 特性来对站点内容进行布局。然而，这些工具没有一个是为当前的复杂网页或网络应用设计的。像垂直居中这样的简单的需求都需要费点儿力气才能满足，以至于我们通常认为单枪匹马实现灵活栅格布局这样的需求不太现实，因此各种 CSS 栅格布局框架获得了巨大的成功。
Flexbox 规范的相关工作已经进行 3 年之久，很多浏览器厂商都发布了其实验性质的实现。2012 年 9 月，针对 Flexbox 语法的第三次主要修订进入了 W3C 的候选推荐阶段。这说明 W3C 对当前的语法是满意的，并鼓励浏览器厂商进行实现。
Flexbox 规范大事年表：
各个浏览器都在积极地接纳 Flexbox。本文写就之时，Chrome 22+、Opera 12.1+ 以及 Opera Mobile 12.1+ 均已支持 Flexbox。Firefox 18 和 Blackberry 10 也将马上跟进。我建议使用支持 Flexbox 的浏览器来阅读本文，以便观察示例如何工作。
尽管在 Flexbox 的帮助下，以前千辛万苦才能实现或者根本不敢想象的布局都能轻而易举地实现，但要真正习惯以 Flexbox 的方式进行布局还是需要一定的时间。在使用 Flexbox 时，新的术语或概念都可能成为拦路虎，因此我们先来讨论一下术语和概念的问题。
Flexbox 布局涉及 Flex 容器（Flex Container）和 Flex 项目（Flex Item）。Flex 容器的 display 属性为 flex 或 flexbox。flex 属性使得容器渲染为块级元素，而 inline-flex 则使其渲染为行内元素。
下面是声明 Flex 容器的示例：
.flex-container { display: -webkit-flex; display: flex;}本文中的所有代码示例都将包含全面的浏览器厂商前缀。
Flex 容器的任何子元素都是 Flex 项目，并且 Flex 项目可以有任意多个。Flex 容器之外的任何元素以及 Flex 项目内的元素都将照常渲染。简而言之，Flex 容器决定 Flex 项目在其内部的布局方式。
在Flex容器内，Flex 项目沿 Flex 布局线 排布。默认情况下，每个容器只有一条 Flex 布局线。
上图的示例展示了默认情况下两个项目在容器中的排布：从左到右，沿水平 Flex 布局线排列。
使用 Flexbox 进行富有创造性的布局不可避免地要改变 Flex 布局线的方向。默认情况下，Flex 布局线与文本书写方向一致：从左到右，从上到下。
W3C 有一个工作草案，是关于一项称作书写模式（Writing Modes）的新特性的。书写模式为从右至左或纵向的文字排布提供了新的实现方式，在对特定的语言进行排版时常会遇到这样的需求。
书写模式仍然处于半成品状态，不过 direction 属性已经在 Chrome 中得到了支持。上面的示例中，如果如果我们将 direction 的值设置为 rtl （从右到左），那么不光文本内容会从右往左渲染，Flex 布局线的方向也会改变，从而影响页面的布局。
这或许就是很多与 Flexbox 相关的术语非常抽象的原因。如果不能确定页面语言的话，我们就不能简单地用“上”“下”“左”“右”来代表布局方向。
Flexbox 通过引入概念主轴（Main Axis）和侧轴（Cross Axis）来体现对书写模式的支持。Flex 布局线与主轴的方向一致，而侧轴则与主轴正交。
每条轴的起点、终点以及方向的名字如下所示：
主轴和侧轴两个术语非常重要，我们有必要在继续之前将其彻底搞懂。在使用 Flexbox 进行布局的时候，任何东西都与此有关。本文所有的示例中，书写模式都是从左往右从上往下的，但是我们必须了解并不一定所有情况下都是如此。
The flex-direction allows you to change the axes of the Flex Container. The default value of flex-direction is row. With this value, Flex Items are laid out in the direction of the writing-mode. Again, that means left-to-right, top-to-bottom by default. The other values are as follows:
Let’s take our previous example and change the flex-direction to column.
Now our Flex Items are being laid out vertically.
The justify-content property of Flex Containers adjusts the positions of Flex Items on the Main Axis. The possible values are:
Here we set justify-content to center to cause Flex Items to be centered on the Main Axis:
flex-start, flex-end, and center are straightforward. space-between and space-around distribute the whitespace between Flex Items in more subtle ways. This diagram from the specification explains it best:
align-items is complementary to justify-content. align-items adjusts the way Flex Items are positioned on the Cross Axis. The possible values are:
Here we set align-items to center to cause Flex Items to be centered on the Cross Axis:
Again, the flex-start, flex-end, and center values are straightforward. stretch is also fairly simple: it causes Flex Items to be stretched out from the Cross Start to the Cross End. baseline causes Flex Items to be aligned along their baseline. Baselines are calculated based on the content of the Flex Items. This is best explained by the following image from the Flexbox specification:
Up until now, every Flex Container has had only one Flex Line. Using flex-wrap you can create Flex Containers with multiple Flex Lines. The possible values for flex-wrap are:
If flex-wrap is set to wrap, Flex Items wrap onto additional Flex Lines if there is not enough room for them on one Flex Line. Additional Flex Lines are added in the direction of the Cross Axis.
Here is an example using flex-wrap:
wrap-reverse is the same as wrap except new Flex Lines will be added in the opposite direction on the Cross Axis.
align-content modifies the behavior of flex-wrap. It is similar to align-items, but instead of aligning Flex Items, it aligns Flex Lines. As you might expect, its possible values are similar:
These values are analagous to their counterparts in justify-content and align-items.
In this example we set align-content to center:
flex-flow is a shorthand for flex-direction and flex-wrap.
flex-flow: [flex-direction] [flex-wrap]
For example:
gistfile1.css
.flex-container { -webkit-flex-flow: column nowrap; flex-flow: column nowrap;}A Flex Item is any direct child of a Flex Container. Text in a Flex Container also gets treated as a Flex Item.
The contents of Flex Items render as normal. For example, while setting float on a Flex Item does nothing, you could have a floated element inside of a Flex Item.
Flex Items are said to have a Main Size and a Cross Size. The Main Size is the size of the Flex Item in the dimention of the Main Axis. The Cross Size is the size of the Flex Item in the dimention of the Cross Axis. Effectively, the width or height of a Flex Item may be its Main Size or Cross Size depending on the Flex Container’s axes.
The following properties adjust the behavior of Flex Items.
order is the simplest one. Setting orders for Flex Items adjusts their order when rendered. In this example, we set the order of one Flex Item to -1, causing it to be displayed before any other Flex Items.
This can be useful for accessibility, where the document order and the displayed order may need to be different.
You may be familiar with the normal effect of margin: auto;. In Flexbox it does the same sort of thing, but it’s even more powerful. An “auto” margin will absorb extra space. It can be used to push Flex Items into different positions.
Here we declare margin-right: auto; on the first Flex Item, causing all the extra space to be absorbed to the right of that element:
Here we use margin: auto; to achieve the holy grail of CSS layout: true vertical centering:
The align-self property of Flex Items effectively overrides the Flex Container’s align-items property for that item. It has the same possible values as align-items:
In this example we give different align-self values to each Flex Item:
I included two baseline Flex Items because their alignment is only relative to one another.
Now we’re finally going to put the flex in Flexbox. flex specifies how a Flex Item will be prioritized when free space is being distributed on the Main Axis.
Let’s look at each of the common values one at a time.
This syntax specifies a number that represents the ratio of free space that should be taken by this Flex Item.
In this example, the first Flex Item consumes 2/4 of the free space, and the other two Flex Items consume 1/4 of the free space each:
It can be useful to set the number to 1 for every Flex Item, causing free space to be distributed evenly:
A Flex Item with its flex value set to initial will be inflexible when there is free space, but can shrink smaller if needed.
A Flex Item with its flex value set to auto will be fully flexible along the Main Axis.
auto currently works in Opera 12.11 but does not work in Chrome 23.0.1271.95. You can often work around this by using flex: 1;.
A Flex Item with its flex value set to none will be fully inflexible in all situations.
flex can also be used as a shorthand for specifying flex-grow, flex-shrink, and flex-basis in one declaration:
flex: [flex-grow] [flex-shrink] [flex-basis]
Most use-cases do not require this syntax. Further, it requires a more specialized understanding of the flex algorithm. If you’re feeling brave, take a look at the specification.
You can also specify each of flex-grow, flex-shrink, and flex-basis as separate properties. I strongly recommend against this: when using the flex shorthand, more sensible defaults are applied to the values that are not given.
When it is implemented, visibility: collapse; will be distinct from visibility: hidden; and display: none; for Flex Items. With collapse, the element will affect the Cross Size of the Flex Container, but it will not be displayed nor will it consume any space on the Main Axis. This will be useful for dynamically adding and removing Flex Items without affecting the Flex Container’s Cross Size.
Currently, visibility: collapse; does not appear to be correctly implemented in any browser. visibility: collapse; appears to do the same thing as visibility: hidden; in current implementations. I expect this to change soon.
You can see a good mocked-up example of how collapse will work in the spec.
As you can see, Flexbox is a powerful new layout mode that will revolutionize layout for websites. As you can also see, it requires a whole new way of thinking. Hopefully this article has prepared you to start making websites with Flexbox. I don’t know about you, but it seems to me that the future is awesome.
联系客服
