弹性布局——Flexible Box

.box{
  display: flex;
}

• 行内元素也可以使用Flex布局。

 .box{
  display: inline-flex;
}

（一）交叉轴

• 项目在交叉轴上如何对齐？使用align-items属性来决定。align-items属性包括五种对齐方式：

1.      flex-start——交叉轴的起点对齐。

2.      flex-end——交叉轴的终点对齐。

3.      center——交叉轴的中点对齐。

4.      baseline——项目的第一行文字的基线对齐。

5.      stretch——（默认值），如果项目未设置高度或设为auto，将占满整个容器的高度。

（二）主轴

• main axis的方向由什么确定？由flex-direction属性决定。flex-direction属性包括四个：

1.         row——（默认值），主轴为水平方向，起点在左端。

2.         row-reverse——主轴为水平方向，起点在右端。

3.         column——主轴为垂直方向，起点在上沿。

4.         column-reverse。——主轴为垂直方向，起点在下沿。

• 项目在主轴上的对齐方式可以使用justify-content属性来决定。justify-content属性包括五种对齐方式：

1.      flex-start——（默认值），左对齐

2.      flex-end——右对齐

3.      center——居中

4.      space-between——两端对齐，项目之间的间隔都相等。

5.      space-around——每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

• Flex容器（flex container），简称”容器”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

（三）轴线

• 多根轴线的对齐方式？使用align-content属性定义。align-content属性包括六个值：

1.      flex-start：与交叉轴的起点对齐。

2.      flex-end：与交叉轴的终点对齐。

3.      center：与交叉轴的中点对齐。

4.      space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

5.      space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

6.      stretch（默认值）：轴线占满整个交叉轴。

• 如果一条轴线排不下，如何换行？使用flex-wrap属性进行换行。flex-wrap属性包括三个：

1.      nowrap——（默认）：不换行。

2.      wrap——换行——第一行在上方

3.      wrap-reverse——换行——第一行在下方

• flex-direction属性和flex-wrap属性的简写，可以使用flex-flow属性来定义。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}