定义弹性盒

Flex-box 由伸缩盒和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex ，可以得到一个伸缩容器。设置 flex 的容器被渲染成一个块级元素，而设置 inline-flex 的容器则渲染为一个行内元素。

display: flex | inline-flex;

其子元素将变成 flex 文档流，被称为伸缩项目。此时， CSS 的 columns 属性在伸缩容器上么有任何效果，同时 float 、 clear 、 vertical-align 属性在伸缩项目没有效果。

伸缩项目中的每一个子元素都是一个伸缩项目，伸缩项目可以是任意数量的，伸缩容器外和伸缩项目内的一切元素都不受影响。伸缩项目沿着伸缩容器内的一个伸缩行定位，通常每一个伸缩容器只有一个伸缩行。

定义成弹性盒后， css 的 columns 属性在伸缩盒上没效果，同时 float 、 clear 和 vertical-align 在伸缩项目无效果。

W3C 解释

常规布局是基于块和文本流方向，而 flex 布局是基于 flex-flow 流。

基本上，伸缩项目是沿着主轴（ main axis ），从主轴起点（ main-start ）到主轴终点（ main-end ）；或者沿着侧轴（ cross axis），从侧轴起点（ cross-start ）侧轴终点（ cross-end ）排列：

• 主轴（ main axis ）: 伸缩容器的主轴，伸缩项目主要沿着这个轴进行排布。注意，他不一定是水平的，这主要取决于 justify-content 属性设置
• 主轴起点（ main-start ）和主轴终点（ main-end ）：伸缩项目放置在伸缩容器内从主轴起点（ main-start ）向主轴终点（ main-end ）方向
• 主轴尺寸（ main size ）：伸缩项目在主轴方向的宽度和高度就是主轴尺寸。伸缩项目主要的大小属性要么是宽度，要么是高度，由哪一个对着主轴方向决定
• 侧轴（ cross axis ）: 垂直于主轴，其方向主要取决于主轴
• 侧轴起点（ cross-start ）和 侧轴终点（ cross-end ）：伸缩项目的配置从容器的侧轴起点开始，在侧轴的终点结束
• 侧轴尺寸（ cross-size ）: 伸缩项目在侧轴方向的宽度和高度就是侧轴的长度。伸缩项目的侧轴长度属性是 width 或 height 属性，由哪一个对着侧轴方向决定

定义伸缩方向（容器设置）

使用 flex-direction 属性来定义伸缩方向。语法如下

flex-direction: row | row-reverse |column | column-reverse;

• row: 默认值，在 ltr 排版左到右，在 rtl 排版右到左
• row-reverse: 与 row 相反 ，在 ltr 排版 右到左，在 rtl 左到右
• column ：类似 row ，不过是从上到下
• column-reverse: 类似 row-reverse ，不过是上到下

定义行数（容器）

使用 flex-wrap 定义多行显示，侧轴方向决定了新型堆放方向。

flex-wrap: nowrap | wrap | wrap-reverse;

• nowrap ： 默认值，伸缩器单行显示。在 ltr 排版左到右，在 rtl 排版右到左
• wrap ： 伸缩器多行显示，在 ltr 排版左到右，在 rtl 排版右到左
• wrap-reverse ： 伸缩器多行显示，与 wrap 相反

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性，适用于伸缩容器。该属性可以同时定义伸缩容器的主轴和侧轴，其默认值为 row nowrap 。具体如下：

flex-flow: < 'flex-direction' > | | < 'flex-wrap' >;

对齐方式（容器设置） justify-items

为盒中每一个项目定义了默认的 justify-self ，使这些项目默认沿着轴线对齐到盒子。

主轴对齐 justify-content

属性用来定义伸缩项目沿着主轴的对齐方式。该属性适用于伸缩容器，当一行上的所有伸缩项目都不能伸缩或是达到其最大长度时，这一属性才会对多余的空间进行分配。到项目溢出某一行时，这一属性也会在对齐上加以控制：

justify-content: flex-start | flex-end |center | space-between | space-around;

• flex-start: 默认值，伸缩项目向一行的起始位置靠齐
• flex-end: 伸缩项目向一行的结束位置靠齐
• center ： 伸缩项目向一行的中间位置靠齐
• space-between ：两端对齐式分布
• space-around ：环绕式对齐，两端保留空间

侧轴对齐 align-items

属性用来定义伸缩项目在伸缩容器中当前行的侧轴上对齐方式。类似于侧轴的 justify-content 属性。语法如下：

align-items: flex-start | flex-end |center |baseline | stretch;

• flex-start: 伸缩项目在侧轴起点的外侧边距紧靠该行起始边
• flex-end: 伸缩项目在侧轴起点的外侧边距紧靠该行终止边
• center: 伸缩项目在侧轴起点的外侧边距紧靠该行居中位置
• baseline ： 基线对齐
• stretch ：默认值，伸缩项目填充整个项目。此值会在项目的外边距盒的尺寸再遵照 min/max-width/height 属性的限制下尽可能的接近行的尺寸

伸缩行对齐 align-center

被用来调整伸缩行在伸缩容器内的对齐方式，本属性在只有一行的伸缩容器上没有效果。语法如下：

align-center: flex-start | flex-end |center | space-between | space-around |
  stretch;

• flex-start: 各行向伸缩项目起点靠齐
• flex-end: 伸缩项目向各行的结束位置靠齐
• center ： 伸缩项目向各行的中间位置靠齐
• space-between ：各行在伸缩容器内自由分布
• space-around ：各行环绕式对齐，两端保留空间
• stretch ：各行伸缩以占剩余空间