flex属性
1.flex-direction<br>确定排列方式<br>
用于指定Flex主轴的方向，继而决定 Flex子项在Flex容器中的位置
row：默认值，表示水平方向从左到右排列，此时水平方向轴线为主轴<br> row-reverse：与row相反<br> column：表示垂直方向从上到下排列，此时垂直方向轴线为主轴<br> column-reverse：与column相反
2.flex-wrap<br>用于指定Flex子项是否换行
nowrap：默认值，表示不换行，Flex子项可能会溢出<br> wrap：表示换行，溢出的Flex子项会被放到下一行<br> wrap-reverse：表示反方向换行
换行以后两行之间产生了很大的间距，这个问题，<br>在 align-content 属性中可以得到很好的解决.
4.justify-content<br>指定水平方向上Flex子项的对齐方式
flex-start：默认值，表示与行的起始位置对齐<br> flex-end：表示与行的结束位置对齐<br> center：表示与行中间对其<br> space-between：表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于flex-start<br> space-around：表示间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于center
5.align-items<br>指定垂直方向上Flex子项的对齐方式
flex-start：表示与侧轴开始位置对齐<br> flex-end：表示与侧轴的结束位置对齐<br> center：表示与侧轴中间对齐
6.align-content<br>只作用于多行的情况下，用于多行的对齐方式
stretch：默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。<br> flex-start：表示各行与侧轴开始位置对齐，第一行紧靠侧轴开始边界，之后的每一行都紧靠前面一行<br> flex-end：表示各行与侧轴的结束位置对齐，最后一行紧靠侧轴结束边界，之后的每一行都紧靠前面一行<br> center：表示各行与侧轴中间对齐<br> 再次强调：该属性只作用于多行的情况，在只有一行的Flex容器上无效，另外该属性可以很好的处理，换行以后相邻行之间产生的间距。
Flex子属性 order(元素顺序)
order值越小越靠前
