采用flex布局的元素称为容器(flex container)，它的所有子元素则称为flex项目（flex item）。 容器默认存在两根轴，水平主轴（main axis）和垂直的交叉轴（cross axis）。主轴开始的位置叫做main start，主轴结束的位置叫做main end；交叉轴开始的位置叫做cross start，交叉轴结束的地方叫做cross end。项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size，占据的交叉轴空间叫做cross
容器属性：6个 1.flex-direction:决定主轴方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
cloumn：主轴为垂直方向，起点在顶端
cloumu-reverse：主轴为垂直方向，起点在下端
2.flex-wrap：默认情况下，项目排成一行，当项目放不下时，如何换行排列。
nowrap（默认）：不换行
wrap：换行，第一行在上面
wrap-reverse：换行，第一行在最下面
3.flex-flow：是flex-direction和flex-wrap的简写，默认值为row wrap
flex-flow： |
4.justify-content：项目在主轴上的对齐方式。
flex-start（默认值）：沿主轴起始位置对齐
flex-end：沿主轴结束位置对齐
center: 主轴居中
space-between：两端对其，项目之间的间隔都相等
space-around：每个项目间的距离相等，项目距离容器边框的距离为项目间的距离一半
5.align-items：交叉轴如何对齐
flex-start：沿交叉轴起始位置对齐
flex-end：沿交叉轴结束位置对齐
center: 交叉轴居中
baseline：项目第一行文字的基线对齐
stretch（默认值）：项目未设置高度或者设为auto，则占满整个容器的高度
6.align-content：
stretch（默认值）：元素被拉伸适应容器，平分剩余空间，如果容器不够，则等效于flex-start属性
center：元素位于容器中心
flex-start：元素位于容器的开头
flex-end：元素位于容器结尾
space-between：元素于各行之间有空白，且平均分配，当剩余空间为负数时，等同于flex-start属性
space-around：元素各行之间有空隙且平均分配，行之间的距离为第一行和最后一行到容器距离的两倍
