用六个字概括 flex 布局属性：简单、方便、快速。
一、简介
flex（flexible box：弹性布局盒模型），是 2009 年 w3c 提出的一种可以简洁、快速对页面进行弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持：
其中在webkit内核的浏览器中使用时，必须加上 -webkit- 前缀。
使用 flex 布局的容器（flex container），它内部的元素自动成为 flex 项目（flex item）。容器拥有 两根 隐形的轴，水平的 主轴（main axis），和竖直的 交叉轴（cross axis）。
主轴开始的位置，即主轴与左边框的交点，称为 main start；主轴结束的位置称为 main end；交叉轴开始的位置，即交叉轴与上边框的交点，称为 cross start；交叉轴结束的位置称为 cross end。
item 按主轴或交叉轴排列，item 在主轴方向上占据的宽度称为 main size，在交叉轴方向上占据的宽度称为 cross size。
注意：使用 flex 容器内元素，即 flex item 的 float，clear、vertical-align 属性将失效。
二、属性总结表
| 属性名称 | 属性意义 | 属性可能的值 | |
|---|---|---|---|
| 容器属性 | flex-direction | 决定 item 排列方向 | row（默认，左右），row-reverse（右左），column（上下），column-reverse（下上） |
| flex-wrap | 排列不下时，item 如何换行 | nowrap（默认，不换行），wrap（换行），wrap-reverse（返向换行） | |
| flex-flow | flex-direction 和 flex-wrap 的集合简写 | row nowrap（默认，其它效果按照上方设置即可） | |
| justify-content | item 在主轴上的对齐方式 | flex-start（首对齐）、flex-end（尾对齐）、center（居中对齐）、space-between（两端对齐）、space-around（沿轴线均匀分布） | |
| align-items | item 在交叉轴上的对齐方式 | flex-start、flex-end、center、baseline（item 第一行文字底部对齐）、stretch（item 未设置高度时，item 将和容器等高对齐） | |
| align-content | 多根轴线的对齐方式 | flex-start、flex-end、center、space-between、space-around、stretch | |
| item 的属性 | order | 定义 item 的排列顺序 | 整数，默认为 0，越小越靠前 |
| flex-grow | 当有多余空间时，item 的放大比例 | 整数，默认为 0，即有多余空间时也不放大 | |
| flex-shrink | 当空间不足时，item 的缩小比例 | 整数，默认为 1，即空间不足时缩小 | |
| flex-basis | item 在主轴上占据的空间 | 整数，长度值，默认为 auto | |
| flex | grow，shrink，basis 的简写 | 默认值为 0 1 auto | |
| align-self | 单个 item 独特的对齐方式 | 同 align-items，可覆盖 align-items 属性 |
三、容器属性详解
3.1 flex-direction
flex-direction 决定主轴的方向，即项目排列的方向。有四个可能的值：row（默认） | row-reverse | column | column-reverse。
- row：默认情况，主轴为水平方向，item 沿主轴从左至右排列
- column：主轴变为竖直方向，item 沿主轴从上至下排列
- row-reverse：主轴水平，item 从右至左排列（与 row 相反）
- column-reverse：主轴竖直，item 从下至上排列（与 column 相反）
3.2 flex-wrap
flex-wrap 决定项目在盒中无法撑满的情况下，是否换行。
- nowrap：默认情况，自动缩小项目的宽度，不换行
- wrap：换行，且第一行在上方
- wrap-reverse：换行，第一行在下面（与 wrap 相反）
3.3 flex-flow
它是 flex-direction 和 flex-wrap 的集合简写形式，如：row wrap | column wrap-reverse 等。默认值为 row nowrap，即横向排列 不换行。
3.4 justify-content
row
决定 item 在横向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为横向主轴时，具体含义如下：
- flex-start：左对齐
- flex-end：右对齐
- center：居中对齐
- space- between：两端对齐
- space-around：沿轴线均匀分布
- space-evenly：左右均匀分布
column
决定 item 在纵向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为纵向主轴时，具体含义如下：
- flex-start：上对齐
- flex-end：下对齐
- center：居中对齐
- space- between：两端对齐
- space-around：沿轴线均匀分布
- space-evenly：上下均匀分布
补充知识点：space-around 和 space-evenly 的区别
3.5 align-items
row
决定了 item 在横向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为横向主轴时，其具体含义为：
- flex-start：顶端对齐
- flex-end：底部对齐
- center：竖直方向上居中对齐
- stretch：当 item 未设置高度时，item 将和容器等高对齐
- baseline：item 第一行文字的底部对齐
column
决定了 item 在纵向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为纵向主轴时，其具体含义为：
- flex-start：左侧对齐
- flex-end：右侧对齐
- center：水平方向上居中对齐
- stretch：当 item 未设置宽度时，item 将和容器等宽对齐
3.6 align-content
该属性定义了当有多根主轴时，即 item 不止一行时，多行在交叉轴上的对齐方式。注意当有多行时，定义了 align-content 后，align-items 属性将失效。align-content 可能值含义如下（假设主轴为垂直方向）：
- flex-start：上对齐
- flex-end：下对齐
- center：垂直居中对齐
- space- between：沿轴线两端对齐
- space-around：沿轴线均匀分布
- stretch：各行将根据其 flex-grow 值伸展以充分占据剩余空间
四、item属性详述
item 的属性在 item 的 style 中设置，item 共有如下六种属性：
4.1 order
order 的值是整数，默认为 0，整数越小，item 排列越靠前，如上图所示。
4.2 flex-grow
它定义了当 flex 容器有多余空间时，item 是否放大。默认值为 0，即当有多余空间时也不放大；可能的值为整数，表示不同 item 的放大比例。
4.3 flex-shrink
定义了当容器空间不足时，item 是否缩小。默认值为 1，表示当空间不足时，item 自动缩小，其可能的值为整数，表示不同 item 的缩小比例。
4.4 flex-basis
表示 item 在主轴上占据的空间，默认值为 auto。
4.5 flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三属性的简写总和。
4.6 align-self
align-self 属性允许 item 有自己独特的在交叉轴上的对齐方式，它有六个可能的值，默认值为 auto。
- auto：和父元素 align-self 的值一致
- flex-start：顶端对齐
- flex-end：底部对齐
- center：竖直方向上居中对齐
- baseline：item 第一行文字的底部对齐
- stretch：当 item 未设置高度时，item 将和容器等高对齐
