Flex布局

Flex 弹性布局，任何一个容器都可以指定为Flex布局，但是设置Flex布局后，float，vertical-align，clear属性会失效

容器的属性

1.flex-direction  决定主轴的方向，即项目的排列方向  

//有4个值
row: 主轴为水平方向，起点在左端
row-reverse: 主轴为水平方向，起点在右端
colum: 主轴为垂直方向，起点在上沿
colum-reverse: 主轴为垂直方向，起点在下沿

2.flex-wrap属性

默认情况下，项目都排在一条线（又称轴线）上，flex-wrap定义，如果一条轴线排不下，如何换行

//有三个值
nowrap: 默认，不换行
wrap: 换行，第一行上方
wrap-reverse: 换行，第一行在下方

3.flex-flow

flex属性是flex-direction属性和flex-wrap属性的简写，默认值为 row nowrap

flex-flow: flex-direction || flex-warap

4.justify-content

定义项目在主轴的对齐方式

//有5个值
flex-start: 默认，左对齐
flex-end: 右对齐
center: 居中
space-between: 两端对齐，项目之间的间隔都相等
space-around: 每个项目两侧的间隔都相等，所以项目间隔比项目与边框的间隔大一倍

5.align-items属性

定义项目在交叉轴上如何对齐（垂直的轴叫交叉轴，水平的叫主轴）

//有5个值
flex-start: 交叉轴的起点对齐
flex-end: 交叉轴的终点对齐
center: 交叉轴的中点对齐
baseline: 项目的第一行文本的基线对齐
stretch: 默认值，如果项目未设置高度或者为auto,将占满正规容器的宽度

项目的属性

1.order 

定义项目的排列顺序，数值越小，排列越靠前，默认为0

2.flex-grow属性

定义项目的放大比例，默认为0，即存在剩余空间，也不放大 flex-grow为1的时候自动填充剩余空间，三栏布局。。。。

如果所有项目的flex-grow属性都为1，则他们降等分剩余空间，如果有一个项目的flex-grow为2，其他项目为1，则前者占据的剩余空间比其他项目多一倍

3.flex-shrink属性

定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比缩小，如果一个项目的flex-shrink为0，其他项目为1，则空间不足时，前者不缩小

4.flex-basis属性

定义在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余的空间，默认值为auto,即项目的本来大小

他可以设置跟width或height属性一样的值，则项目将占据固定空间

5.flex属性

flex属性是flex-grow,flex-shrink,flex-basis的简写，默认值为0 1 auto

该属性有两个快捷值 auto（1 1 auto）,none （0 0 auto）

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

6.align-self属性

这个属性允许单个项目和其他项目有不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性

  align-self: auto | flex-start | flex-end | center | baseline | stretch;

摘自阮一峰老师的博客，地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html