弹性盒子模型 display：flex

弹性盒模型，即Flexbox，是css3中的新特性，其实弹性盒模型的原身是dispaly：box。为容器指定弹性盒子，只需在父元素（即容器）中设置：display：flex。

弹性盒子有两条轴：横轴和纵轴，默认横轴（自左向右）为主轴，纵轴默认自上而下为辅轴。

设置了display：flex的容器的属性有：flex-direction、flex-wrap，justify-content，flex-flow，align-items，align-content；

flex-direction：决定主轴的方向，其值有：row（自左向右）、row-reverse（自右向左）、column（主轴为垂直的，自上而下）、column-reverse（自下而上）。

flex-wrap：定义一排容不下的时候是否换行，默认为nowrap不换行；wrap为正常换行。

justify-content：定义了条目在主轴上的排列方式：有左对齐flex-start（默认值），右对齐flex-end，居中对齐center，两端对齐space-between，等分space-around即每个条目两端的空隙相等。

flex-flow：flex-direction和flex-wrap的合并写法，默认为row nowrap。

align-item：定义了条目在纵轴上的排列方式，有顶部对齐flex-start，底部对齐flex-end，居中对齐center，strecth（默认值，如果条目不设置具体数值，则高度会占满整个父元素的高度），baseline以条目里的第一行文字的基线为准。

align-content：定义了多跟轴线时，条目在纵轴的对齐方式；如果只有一根主轴线则该属性不起作用，值和justify-content的值是一样的。