flex布局概念

flex

1. 弹性布局;
2. 块元素display:flex;
3. 行内元素display:inline-flex;
4. 设为flex布局后，子元素的float、clear、vertical-align属性将失效
5. Flex 布局的元素，称为 Flex 容器；它的所有子元素自动成为容器成员，称为 Flex 项目
6. 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end

容器的属性

1. flex-direction：决定主轴方向（即项目排列方向），默认水平
2. flex-wrap：定义如果一条轴线放不下，如何换行
3. flex-flow：flex-direction和flex-wrap的缩写，默认为row nowrap
4. justify-content：定义项目在主轴上的对齐方式
5. align-items：定义项目在交叉轴上的对齐方式
6. align-content：定义多条轴线的对齐方式，如果只有一条轴线，该属性不起作用

项目的属性

1. order：定义项目的排列顺序，数值越小，排列越靠前，默认为0
2. flex-grow：定义项目的放大比例，默认为0，（即如果存在剩余空间，也不放大）
3. flex-shrink：定义项目的缩小比例，默认为1，（即如果空间不足，该项目缩小）
4. flex-basis：定义了在分配剩余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算是否有剩余空间。默认值为auto，即项目的本来大小
5. 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

参考链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html