弹性盒子模型

display:flex 块级弹性盒子
display:inline-flex 行级弹性盒子

flex-direction:
row    从左到右水平排列元素（默认值）
row-reverse    从右向左排列元素
column    从上到下垂直排列元素
column-reverse    从下到上垂直排列元素

flex-wrap:
flex-wrap 属性规定flex容器是单行或者多行。
nowrap    压缩，元素不拆行或不拆列（默认值）
wrap    容器元素在必要的时候拆行或拆列。
wrap-reverse    容器元素在必要的时候拆行或拆列，但是以相反的顺序

主轴元素的多种排列方式
justify-content:
flex-start    元素紧靠主轴起点
flex-end    元素紧靠主轴终点
center    元素从弹性容器中心开始
space-between    第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
space-around    每个元素两侧的间隔相等。所以，元素之间的间隔比元素与容器的边距的间隔大一倍
space-evenly    元素间距离平均分配align-items:    控制元素在交叉轴的行上的排列
stretch    元素被拉伸以适应容器（默认值）
center    元素位于容器的中心
flex-start    元素位于容器的交叉轴开头
flex-end    元素位于容器的交叉轴结尾