1.什么是flex布局
flex布局就是弹性页面布局，它是2009年w3c提出的一种布局方式。
flex布局的特点：
- flex容器默认由两根轴，水平的主轴（mian axis）和垂直的交叉轴（cross axis）;
- 主轴的开始位置叫mian start,结束位置叫mian end；
- 交叉轴的水平位置叫cross start,结束位置叫cross end;
- 容器的成员叫项目，单个项目占据的主轴空间叫main size,占据的交叉轴空间叫cross size
2.flex容器的属性
总共6个，flex-derection,flex-wrap;justify-content,items-align,align-content;
2.1 flex-direction 作用：定义主轴的方向（项目的排列方向）
属性值说明：
row(默认值):主轴为水平方向，起点为左端；
row-reverse:主轴为水平方向，起点为右端；
column:主轴为垂直方向，起点在顶部；
column-reverse:主轴为垂直方向，起点在底部；
2.2 flex-wrap 作用：定义项目换行的方式
属性值说明：
nowrap（默认值）:不换行;
wrap:换行，第一行在上方；
wrap-reverse:换行，第一行在下方；
2.3 flex-flow 作用：是flex-direction和flex-wrap的缩写
2.4 justify-content 作用：定义项目在主轴方向上的对齐方式
属性值说明：
flex-start(默认值):左对齐；
flex-end:右对齐；
center:居中对其
space-between:两端对其，项目之间间隔相等
space-around:每个项目两侧的间隔相等
2.5 items-align 作用：定义项目在交叉轴方向上的对齐方式
属性值说明：
flex-start:顶部对齐
flex-end:底部对齐
center:居中对齐
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
2.6 align-content 作用：定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
属性值说明：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
项目相关属性参考 Flex 布局教程：语法篇
