flex 布局

容器（父元素）： 

display: flex  或者 display: inline-flex(行内元素）

flex-direction：属性决定主轴的方向

flex-wrap：属性定义是否换行，如何换行

flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content：属性定义了项目在主轴上的对齐方式。

align-items：属性定义项目在交叉轴上如何对齐

align-content：属性定义了多根轴线的对齐方式

项目（子元素）：

order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow：属性定义项目的放大比例，默认为0

flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）

flex：属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

    flex: auto: 1 1 auto

    flex: none: 0 0 auto

    flex: 1: 1 1 0

align-self：属性允许单个项目有与其他项目不一样的对齐方式