CSS 弹性盒子（flex）

1、容器属性display

display：flex | inline-flex
设置容器的陈列方式，告诉容器这是一个flex容器

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2、flex-direction 指定主轴方向

flex-direction : row | row-reverse | column | colum-revcerse
row 子元素排成一排

row-reverse 子元素按倒叙排成一排

column 子元素排成一列

column-reverse 子元素按倒叙排成一列

3、justify-content 设置主轴的对齐方式

justify-content ：flex-start | flex-end | center | space-between | space-around
flex-start 沿正方向排列

flex-end 沿反方向排列

center 居中排列

space-between 两两项目元素之间有间隔的排列方式

space-around 每个元素左右间隔的排列方式

4、flex-wrap 在一行或是一列排列不下的时候，是否允许换行或换列

flex-wrap ：nowrap | wrap | wrap-reverse
nowrap（默认） 单行显示

wrap 多行显示