flex布局

一，什么是flex布局

1.flex布局代表弹性盒子，可用于自适应布局。

2.目前所有浏览器都支持flex布局

3.使用flex布局后，弹性盒子内的float无效。

二，flex布局特征

1.我们可以使用display：flex；display:-webkit-flex声明一个盒子为弹性盒子，盒子里的元素可称为项目。

2.在弹性盒子里默认有一条水平的轴线称之为主轴，还有一条垂直的轴线称为交叉轴。所有元素默认排列在主轴上。

三，容器上的属性

1.flex-dirction: row || row-reverse || column|| column-reverse: 表示主轴的方向。

row 默认方向，起点在左端
row-reverse 水平方向，起点在右端
column 垂直方向，起点在上沿
column-reverse 垂直方向，起点在下沿

2.flex-wrap: nowrap || wrap || wrap-reverse：表示是否换行

nowrap: 默认值，表示不换行
wrap : 表示要换行
wrap-reverse ：表示换行时，第一行在下方。

3.flex-flow:是flex-direction 和flex-wrap 的简写

4.justify-content : flex-start || center || flex-end || space-around || space-between 表示主轴上对齐方式

flex-start 默认值表示在主轴上从起点到终点
flex-end 表示在主轴上从终点到起点
center 表示居中对齐
space-around 每个元素左右有相同的间距
space-between 两个元素之间有相同的距离

5.align-items: flex-start || flex-end || center || baseline || stretch 表示交叉轴的对齐方式

flex-start 默认值表示在主轴上从起点到终点
flex-end 表示在主轴上从终点到起点
center 表示居中对齐
baseline 表示项目第一行文字基线对齐
stretch 未设置高度时，占满容器高度

6.align-content: flex-start || flex-end || center || space-around || space-between|| stretch 表示多个轴线-主轴的对齐方式

flex-start 默认值表示在主轴上从起点到终点
flex-end 表示在主轴上从终点到起点
center 表示居中对齐
space-around 每个轴线左右有相同的间距
space-between 两个轴线之间有相同的距离
stretch 轴线占满容器高度

五，项目上属性

1.order：number 表示项目的顺序，数值越小越靠前，默认为0

2.flex-grow: number 表示项目是否放大，默认为0，表示不占满空间，
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3.flow-shrink:number 项目的缩小比例,默认为1，表示空间不足时缩放
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

4.flex-basic:number 表示分配多余空间之前，项目占据的主轴空间（main size）

5.flex：flex-grow | flex-shrink | flex-basic 的缩写，有auto:(1,1,auto) none:(0,0,auto)

6.align-self：auto | flex-start | flex-end | center | baseline | stretch;表示单个项目在交叉轴上的对齐方式