flex布局

flex布局（弹性布局）

display: flex //将一个容器指定为flex布局
display:inline-flex //指定一个行内元素为flex布局

！要注意的是使用了flex布局后float、clear、vertical-align会失效

一、flex有六个属性可以设置
1、flex-direction //决定主轴的排列方向
2、flex-wrap //决定是否换行
3、flex-flow //flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认 值为row nowrap
4、justify-content //定义项目在主轴的对齐方法
5、align-items //定义项目在交叉轴的对其方法
6、align-content //有多个轴线时去

二、容器属性
1、flex-direction：
row；（默认） X轴为主轴方向，起点在左端
row-reverse； X轴为主轴方向，起点在右端
column； Y轴为主轴方向，起点在上端
column-reverse； Y轴为主轴方向，起点在下端

2、flex-wrap：
nowrap；(默认) 不换行
wrap； 换行
wrap-reverse； 换行不过第一行在下边

3、flex-flow flex-direction||flex-wrap ；

4、justify-content：
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，间隔相等
space-around 两侧间隔相等项目间间隔翻倍

5、align-items：
flex-start 交叉轴上端对齐
flex-end 交叉轴下端对齐
center 交叉轴居中对齐
baseline 以项目第一行文字为基线对齐
stretch（默认值） 若项目未设置高度或auto，将占满整个容 器

6、align-content：
flex-start 与交叉轴上端对齐
flex-end 与交叉轴下端对齐
center 与交叉轴中线对齐
space-between 与交叉轴两端对齐，多条轴线间隔均等
space-around 每根轴线两侧的间隔都相等。所以，轴线 之间的间隔比轴线与边框的间隔大一倍
stretch（默认值） 轴线占满整个交叉轴。

三、项目属性

1、order

2、flex-grow

3、flex-shrink

4、flex-basis

5、flex

6、align-self

参考地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool)