Flex布局使用
基础的float布局是基于盒状模型，依赖 display属性 + position属性 + float属性，对于复杂的布局就歇菜，因此2009年，W3C提出了一种新的方案—-Flex布局。
Flex定义
Flex是Flexible Box的缩写，意为”弹性布局”；
Flex布局中任何东西都可以设置，行内元素也可以，只需要设置display:flex或者inline-flex；
设置了flex布局之后，其子元素的float、clear、vertical-align属性都将不起作用。
在使用flex布局之前，我们需要了解一些概念：
a、设置了flex布局之后，包裹在其中的子元素自动成为flex容器的子成员
b、flex容器有两个轴线，水平轴和垂直轴
c、默认按水平方向排列
Flex使用
Flex的样式属性分为两种，一个是作用在容器上的，即设置为flex的元素；一个是作用在成员上的：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content6种。
1.flex-direction：设置容器排列方向，默认主轴即水平方向；
2.flex-wrap：元素换行，即子元素在轴线上放不下时是否换行以及如何换行；
3.flex-flow：flex-direction和flex-wrap的简写；
4.justify-content：主轴的对齐方式，不一定是水平轴，由flex-direction指定；
5.align-items：交叉轴对齐方式；
6.align-content：多轴对齐方式，只有一轴的时候没有效果；
元素属性
为每一个成员设置单独属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self
order：顺序，从小到大，值越小，排列越靠前
flex-grow：放大比例，默认不放大，在自动撑开时需要
flex-shrink：缩放，是否在空间不足时缩放
flex-basis：主轴上默认空间，和最小宽度一个意思
flex：flex-grow、flex-shrink、flex-basis的简写
align-self：自身对齐方式