Flex布局及属性

定义：flex布局表示弹性布局，为盒状模型提供最大的灵活性。

注意事项：

• 如果是Webkit内核的浏览器，需要加上 -webkit 前缀
• 在父级元素设置为flex布局后，子元素的float、clear、vertical-align属性都将失效，所以在使用flex布局时，不应该先设置完子元素布局后再使用。

容器：采用flex布局的元素被称作容器。

有六个常用属性设置在容器上，分别为：

• flex-direction
• flex-wrap
• flew-flow
• justify-content
• align-items
• align-content

2.项目：容器中的直接子元素就是项目（儿子） 项目默认都是在主轴上进行排列的

项目的相关属性
1.order：设置单个项目在主轴的排列顺序
属性值：
    数字，默认值为0，如果数字越小，越靠近主轴的起始点，可以设置负数
2.flex-grow：用来设置生长因子如何填充占领富余空间

3.flex-shrink:如果项目在主轴上装不下，设置项目的缩小因子（基本上不用）
4.flex-basis：设置项目在主轴的占据大小
（一个盒子，可以通过width来设置盒子在主轴上占据的大小，也可以通过flex-basis来设置盒子的大小，如果同时设置，则是flex-basis起作用）
属性值： 
    和width一样，可设置大小，优先级比width高
5.align-self：设置某个项目在交叉轴上的位置
属性值：
    flex-end：在交叉轴后面
    flex-center：在交叉轴中间
6.flex：复合属性
属性值：
    flex：flex-grow flex-shrink flex-basis