定义弹性盒

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;

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

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

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

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

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

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

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

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

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

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

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