Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。
我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。
当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由
flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。
row-reverse，你的主轴将沿着 inline 方向延伸。
column-reverse 时，你的主轴会沿着上下方向延伸 — 也就是 block 排列的方向。
flex-direction (主轴) 设成了
理解主轴和交叉轴的概念对于对齐 flexbox 里面的元素是很重要的；flexbox 的特性是沿着主轴或者交叉轴对齐之中的元素。
另外一个需要理解的重点是 flexbox 不会对文档的书写模式提供假设。过去，CSS的书写模式主要被认为是水平的，从左到右的。现代的布局方式涵盖了书写模式的范围，所以我们不再假设一行文字是从文档的左上角开始向右书写, 新的行也不是必须出现在另一行的下面。
你可以在接下来的文章中学到更多 flexbox 和书写模式关系的详细说明。下面的描述是来帮助我们理解为什么不用上下左右来描述 flexbox 元素的方向。
之后，你会觉得用起始和终止来描述比左右更合适，这会对你理解其他相同模式的布局方法（例如：CSS Grid Layout）起到帮助的作用。
文档中采用了 flexbox 的区域就叫做 flex 容器。为了创建 flex 容器， 我们把一个容器的
inline-flex。 完成这一步之后，容器中的直系子元素就会变为 flex 元素。所有CSS属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：
- 元素排列为一行 (
在 flex 容器中添加
flex-direction 属性可以让我们更改 flex 元素的排列方向。设置
flex-direction: row-reverse 可以让元素沿着行的方向显示，但是起始边和终止边位置会交换。
把 flex 容器的属性
Multi-line flex containers with flex-wrap
While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.
To cause wrapping behaviour add the property
flex-wrap with a value of
wrap. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As
flex-wrap is set to
wrap, the items wrap. Set it to
nowrap, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using
nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.
The flex-flow shorthand
You can combine the two properties
flex-wrap into the
flex-flow shorthand. The first value specified is
flex-direction and the second value is
In the live example below try changing the first value to one of the allowable values for
column-reverse, and also change the second to
Properties applied to flex items
To have more control over flex items we can target them directly. We do this by way of three properties:
We will take a brief look at these properties in this overview, and a future article will go into their behaviour in depth.
Before we can make sense of these properties we need to consider the concept of available space. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.
If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.
If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the
flex properties that we apply to the items themselves, will do.
flex-basis is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is
auto — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the
If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare
display: flex on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.
flex-grow property set to a positive integer, flex items can grow along the main axis from their
flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.
If we gave all of our items in the example above a
flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.
The flex-grow property can be used to distribute space in proportion. If we give our first item a
flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).
flex-grow property deals with adding space in the main axis, the
flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and
flex-shrink is set to a positive integer the item can become smaller than the
flex-basis. As with
flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for
flex-shrink will shrink faster that its siblings that have lower values.
The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.
Note that these values for
flex-shrink are proportions. Typically if we had all of our items set to flex:
1 1 200px and then wanted one item to grow at twice the rate, we would set that item to flex:
2 1 200px. However you could use flex:
10 1 200px and flex:
20 1 200px if you wanted.
Shorthand values for the flex properties
You will very rarely see the
flex-basis properties used individually; instead they are combined into the
flex shorthand. The
flex shorthand allows you to set the three values in this order —
The live example below allows you to test out the different values of the flex shorthand; remember that the first value is
flex-grow. Giving this a positive value means the item can grow. The second is
flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is
flex-basis; this is the value the items are using as their base value to grow and shrink from.
There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:
flex: initial resets the item to the initial values of Flexbox. This is the same as
flex: 0 1 auto. In this case the value of
flex-grow is 0, so items will not grow larger than their
flex-basis size. The value of
flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of
auto. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.
flex: auto is the same as using
flex: 1 1 auto; everything is as with
flex:initial but in this case the items can grow and fill the container as well as shrink if required.
flex: none will create fully inflexible flex items. It is as if you wrote
flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a
The shorthand you often see in tutorials is
flex: 1 or
flex: 2 and so on. This is as if you used
flex: 1 1 0. The items can grow and shrink from a
flex-basis of 0.
Try these shorthand values in the live example below.
Alignment, justification and distribution of free space between items
A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.
align-items property will align the items on the cross axis.
The initial value for this property is
stretch and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.
You could instead set
flex-start in order to make the items line up at the start of the flex container,
flex-end to align them to the end, or
center to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:
justify-content property is used to align the items on the main axis, the direction in which
flex-direction has set the flow. The initial value is
flex-start which will line the items up at the start edge of the container, but you could also set the value to
flex-end to line them up at the end, or
center to line them up in the centre.
You can also use the value
space-between to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. Or, to cause an equal amount of space on the right and left of each item use the value
Try the following values of
justify-content in the live example:
In a later article we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.
After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at how this specification relates to other parts of CSS.