弹性盒子

弹性容器：display：flex

有六个属性：flex-direction,flex-wrap,flex-flow,jusitify-content,align-items

flex-direction属性（项目的排列方向）

属性值：row,row-reverse(起点在右端)

              column，,column-reverse(起点在下端)

flex-wrap属性：（换行）

属性值：nowrap（默认），wrap（正常），wrap-reserve（第一行在下方）

flex-flow：是flex-direction和flex-wrap的简写形式（默认为row，nowrap）

jusitify-content属性：（对齐方式）

属性值：flex-start（左对齐），flex-end(右对齐) ,center(居中)

align-items属性：

属性值：flex-start（交叉轴的起点对齐），flex-end(终点对齐)，center（居中），baseline（第一行文字的基线对齐），strech（拉伸）

align-content属性：（多行）

flex-start（交叉轴的起点对齐），flex-end（交叉轴的终点对齐），center（居中）

align-content属性：

flex-start：交叉轴的起点对齐

flex-end：终点对齐

center：居中

space-between：两端对齐，中间平均分布

space-around：两侧的间隔相等，中间平均分布

项目的属性：

order（排顺序，数越小越往前，默认为0）

flex-grow（放大比例，默认为0）

flex-shrink（缩放比例，，默认为1）

flex-basis（项目的大小，默认值为auto）

align-self（设置单个项目的样式，默认值为auto）