弹性布局的概念

• 容器：要实现布局效果的父元素；
• 项目：要实现布局效果的子元素；
• 主轴：弹性布局的多个项目排列方向上的一根轴；
• 交叉轴：与主轴交叉的一根轴称为交叉轴；

容器

如果希望弹性布局的父元素独占布局中的一行，就要设置父元素的display属性为flex。
如果希望弹性布局的父元素显示为行内元素特征，与其它元素同在一行内，可设置父元素的display属性为inline-flex。

容器的属性

flex-direction属性

可指定容器的主轴及其排列方向
属性值包括：

• row，默认值，即主轴是x轴，项目从最左端开始向右排列
• row-reverse，表示项目从最右侧开始，从右向左排列（项目排列后的顺序是反的）
• column，主轴是y轴，项目从顶端开始，从上向下排列
• column-reverse, 主轴是y轴，项目从底部向上排列（项目排列后的顺序是反的）

flex-wrap属性

设置当一个主轴排列不下所有项目时，是否换行显示。
属性值包括：

• nowrap，默认值，表示空间不够时，也不换行，项目自动缩小；
• wrap，表示当内容放不下时应该换行显示

flex-flow属性

是flex-direction和flex-wrap两个属性的简写形式
语法格式： flex-flow: flex-direction flex-wrap；（两个值之间用空格分割）

justify-content属性

专门定义项目在主轴上的对齐方式
属性值包括：

• flex-start，表示以主轴的起点对齐
• flex-end，表示以主轴的终点对齐
• center，表示在主轴上居中对齐
• space-between，表示两端对齐
• space-around，表示每个项目两端间距相同

align-items属性

属性值包括：

• flex-start，表示让项目以交叉轴的起点方向对齐
• flex-end，表示让项目以交叉轴的终点方向对齐
• center，表示让项目以交叉轴的中线居中对齐
• baseline，表示让项目以交叉轴的基线对齐
• stretch，表示如果项目未设置尺寸，就让项目在交叉轴上占满所有空间。

项目

项目的属性

order属性

定义项目的排列顺序其值为整数数字，无需单位。值越小，越靠近起点，默认值是0。

flex-grow属性

定义项目的放大比例。如果容器有足够的空间，项目可以放大。其值为整数数字，无需单位。默认情况，项目不放大。取值越大，占据剩余的空间越多。

flex-shrink属性

定义项目的缩小比例。如果容器空间不足时，项目可以缩小。缩小的比例取决于flex-shrink的值。其默认值为1，表示空间不足时，则等比缩小。可改为0，表示不缩小。

align-self属性

专门单独定义某一个项目在交叉轴上的对齐方式。
其取值和align-items完全一样。只是多了一个auto值，表示继承父元素的align-items效果。