flex布局

1. flex是什么

flex是display属性的一个值，display还有其他值，如block,inline-block,inline等。

块状元素的写法

display：flex

行内元素的写法

display:inline-flex

webkit必须加前缀

display:-webkit-flex

注意：被flex修饰的元素和其子元素的float,clear,vertical-align属性自动失效。

2. 基本概念

主轴；交叉轴；main start;main end;cross start;cross end;main size; cross size。

3. flex-container

六个属性：

方向：flex-direction
是否换行：flex-wrap
缩写：flex-flow
主轴位置：justify-content
交叉轴位置：align-items
多个交叉轴（超过一行）时：align-content

4. flex-item

六个属性：

顺序：order
放大：flex-grow
缩小：flex-shrink
基本大小：flex-basis
缩写：flex
覆盖align-items:align-self

其中单词：justify整理对齐；shrink收缩