Flex基础布局

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 阮一峰的flex布局实例

Flex 全拼Flexible Box，意为弹性布局。
注意：
a.webkit内核的浏览器，必须加上-webkit前缀
b.父容器设置flex布局以后，float,clear,vertical-align将失效
设置属性
设置为Flex布局：display:flex;
行内设置Flex布局：display:inline-flex;


flex布局有两根轴：水平的主轴和垂直的交叉轴。


flex-direction决定主轴的排列方向
flex-direction:row|row-reverse|column|column-reverse;
row是横轴方向从左到右，row-reverse是横轴方向从右到左排列。
column是纵轴方向从上到下，column-reverse是纵轴方向从下到上。




flex-wrap 指定多行显示还是单行显示
flex-wrap:nowrap|wrap|wrap-reverse
nowrap默认，单行显示，宽度溢出，则自动压缩相应元素的比例（压缩比例与flex-shirnk相关）
wrap：自动换行，多行显示。
wrap-reverse:多行显示，置换交叉轴的方向，第一行在下方。


flex-flow 是flex-direction和flex-wrap的缩写
flex-flow: <flex-direction> || <flex-wrap>;
flex-flow:row wrap;


justify-content 设置主轴的对齐方式
justify-content:flex-start|flex-end|center|space-between|space-around
flex-start左对齐 flex-end右对齐
center 居中
space-between:两端对齐，项目之间的间隔相等
space-around:项目两侧间隔相等。


align-items决定交叉轴对齐方式
align-items:flex-start|flex-end|center|baseline|stretch
flex-start交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline项目第一行文字的基线对齐
stretch（默）如果未设置高度，将占满整个容器的高度。


align-content设置多跟轴线的对齐方式，一根不起作用
align-content:flex-start|flex-end|center|space-between|space-around|stretch
flex-start交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
space-between:交叉轴两端对齐，项目之间的间隔相等
space-around:项目两侧间隔相等。
stretch（默）平均分配交叉轴空间，相邻行间距相等。


弹性元素


order 根据自身的order值来排序，数值越小，排列越靠前，默认为0。
order: 1;


flex-grow定义项目的放大比例，默认为0，如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。


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


flex-basis项目将占据固定空间 width
flex-basis: <length> | auto;
用来代替width，优先级比width高（如果flex-basis和width有一个值为auto，那么另外一个非auto优先级更高）




flex属性是flex-grow, flex-shrink 和 flex-basis的简写。
默认值auto (1 1 auto) 和 none (0 0 auto)
flex: none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ]


align-self
属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
和align-items属性相同