flex（Flexible Box）弹性布局

任何一个容器均可以指定为 flex 布局

采用 flex 布局的元素，称为 flex 容器（flex container），简称“容器”。它的全部子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。

经常使用容器属性：

flex-direction:  row | column | row-reverse | column-reverse

flex-wrap:  nowrap | wrap | wrap-reverse

flex-flow: flex-direction flex-wrap;

flex-shrink: 缩小比例（默认为1）

flex-glow：方大比例（默认0）

flex-basis: 元素在主轴的初始尺寸百分比（auto由width）

flex: flex-grow + flex-shrink + flex-basis

flex：none（经常使用于固定尺寸，不伸缩）
复制代码

主轴（横轴）对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around
复制代码

交叉轴（纵轴）对齐方式

align-items（单行）: 
stretch(默认 高度撑满) | flex-start | flex-end | center | space-between | space-around

align-items（只对多行元素有效，会以多行做为总体进行对齐，容器必须开启换行）: 
stretch | flex-start | flex-end | center | baseline
复制代码