1什么是flex布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
、采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴。
首先，实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。
块元素布局：flex；
行内元素布局：inline-flex
当设置flex布局后，子元素的float，vertical-align,clear将会失效。
2容器上可以布局的六种属性。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
2.1flex-direction决定主轴的方向，既项目的排列方向。
默认属性值：row既从左向右排列。
属性值：row-reverse 从右向左排列
属性值：column 从上到下排列
属性值：column-reverse从下到上排列 ：
2.2flex-wrap属性，决定是否换行
默认属性值： nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。即使设置了项目的宽度，当弹性盒子宽度不够时，项目宽度会自动缩小。
wrap：项目主轴总尺寸超出容器时换行，第一行在上方
wrap-reverse：换行，第一行在下方
2.3 flex-flow：就是flex-direction和flex-wrap的合写形式
默认值：row nowrap
2.4 justify-content：定义了项目在主轴的对齐方式。
默认值：flex-start:左对齐
flex-end:右对齐
属性值：center居中
属性值：space-between
两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
属性值：space-around每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。
属性值：space-evenly .从头到尾都是等距
2.5align-items定义了项目在交叉轴上的对齐方式
flex-start | flex-end | center | baseline | stretch;
默认属性值：默认值为 stretch ，即如果项目未设置高度或者设为 auto，将占满整个容器的高度。
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
6. align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用
当flex-wrap设置为nowrap，这时只有一根轴线。
当flex-wrap设置为wrap才可能有多跟轴线。
属性值：flex-start | flex-end | center | space-between | space-around | stretch
