flex布局是什么？
Flexible Box，意为“弹性布局”。过去用float布局很难实现的布局（如居中对齐），用flex布局可以轻松地实现。
- 任何一个盒子都可以使用Flex布局。
.box {
display: felx;
}
- 行内元素也可使用Flex布局。
.box {
display: inline-flex;
}
基本概念
采用Flex布局的元素，被称为“Flex容器（flex container）”。它的所有子元素自动成为容器成员。
两根轴
Flex容器存在两根轴：主轴（main axis）、交叉轴（cross axis）。
需要特别注意的是：主轴不一定是水平轴，交叉轴不一定是垂直轴。
四个端点
- main start：主轴的开始位置
- main end：主轴的结束位置
- cross start：交叉轴开始的位置
- cross end：交叉轴结束的位置
两个空间
- main size：单个容器成员占据的主轴空间
- cross size：单个容器成员占据的交叉轴空间
容器的属性
我们讨论容器的6个属性：
| 属性 | 作用 | 值 |
|---|---|---|
| flex-direction | 决定主轴的方向。 | （1）row：主轴为水平方向，起点在左端。 （2）row-reverse：主轴为水平方向，起点在右端。 （3）column：主轴为垂直方向，起点在上沿。 （4）column-reverse：主轴为垂直方向，起点在下沿。 |
| flex-wrap | 默认情况下，容器成员都排在一条轴上。 用此属性来定义：如果一条轴线排不下，该如何换行。 | （1）nowrap（默认值）：不换行或不换列。 （2）wrap：换行或换列，第一条轴在上方（前方）。 （3）wrap-reverse：换行或换列，第一条轴线在下方（后方）。 |
| flex-flow | 是flex-direction属性与flex-warp属性的简写形式。 | 默认值：row nowrap |
| justify-content | 定义了容器成员在主轴上的对齐方式。 对齐方式与主轴的方向有关。 | （1）flex-start（默认值）：与主轴的开始位置对齐。 （2）flex-end：与主轴的结束位置对齐。 （3）center：居中。 （4）space-between：两端对齐，容器成员之间的间隔相等。 （5）space-around:每个容器成员两侧的间隔相等。所以，容器成员之间的间隔，比容器成员与边框的间隔大一倍。 |
| align-items | 定义容器成员在交叉轴上的对齐方式。 对齐方式与交叉轴的方向有关。 | （1）flex-start：与交叉轴的起点对齐。 （2）flex-end：与交叉轴的终点对齐。 （3）center：与交叉轴的中点对齐。 （4）baseline：与主轴上各容器成员的第一行文字的基线对齐。 |
| align-content | 如果容器成员排列在一条以上的轴线上，那么用此属性来定义多根轴线的对齐方式。 如果所有的容器成员排列在一根轴线上，那么此属性不起作用。 | （1）flex-start：与交叉轴的起点对齐。 （2）flex-end：与交叉轴的终点对齐。 （3）center：与交叉轴的中点对齐。 （4）space-between：与交叉轴的两端对齐，轴线之间的间隔被等分。 （5）space-around：每根轴线两侧的间隔相等。所以，轴线之间的间隔，比轴线与边框的间隔大一倍。 （6）stretch（默认值）：轴线占满整个交叉轴。 |
容器成员的属性
我们讨论容器成员的6个属性：
| 属性 | 作用 | 值 |
|---|---|---|
| order | 定义容器成员的排列顺序。 数值越小，排列越靠前。 | 默认值为0。 |
| flex-grow | 定义容器成员的放大比例。 | （1）默认值为0。 即：即使存在剩余空间，也不放大。 （2）如果所有容器成员的此属性都为1， 则它们将等分剩余空间（如果有的话）。 （3）如果一个容器成员的此属性为2，其它容器成员都为1， 则前者占据的剩余空间将比其它项多一倍。 |
| flex-shrink | 定义容器成员的缩小比例。 | （1）默认值为1。即，如果空间不足，此容器成员将缩小。 （2）如果所有容器成员的此属性都为1， 那么当空间不足时，它们将等比例缩小。 （3）如果一个容器成员的此属性为0，其它容器成员都为1， 那么当空间不足时，前者不缩小。 （4）负值对该属性无效。 |
| flex-basis | 定义了在分配多余空间之前，容器成员占据的主轴空间（main size）。 浏览器根据此属性计算主轴是否有多余空间。 | （1）默认值为auto。即，容器成员的本来大小。 （2）它会覆盖width属性 |
| flex | 是flex-grow，flex-shrink和flex-basis的简写。 | （1）默认值为0 1 auto。 （2）该属性有两个快捷值：auto ( 1 1 auto)、none（0 0 auto） （3）建议优先使用该属性，而不是单独写三个分离的属性。 |
| align-self | 此属性允许单个容器成员有与其它容器成员不一样的对齐方式，可覆盖align-item属性。 | 默认值为auto，表示继承父元素的align-item属性；若没有父元素，则等同于stretch。 |
