css flex布局

虽然flex已经出了很久了，而且兼容性也已经不是问题，但我在布局的时候还是用的float，看到别的同事用了flex，觉得挺方便的，就学习了一下，以下内容均来自：http://www.runoob.com/w3cnote/flex-grammar.html

采用flex布局的元素，成为flex容器，他所有的子元素自动成为容器成员，成为flex项目，容器默认存在两根轴，水平轴（main axis） main start到main end , 交叉轴cross start 到 cross end， 项目默认沿主轴排列，单个项目占据的水平轴空间叫main size ,占据交叉轴的空间教cross size.

1、容器属性

flex-direction:row | row-reverse | column | column-reverse; 排列方向

flex-wrap:nowrap | wrap | wrap-reverse;   换行方式

justify-content: flex-start | flex-end | center | space-between | space-around; 水平对齐方式

agint-items: flex-start | flex-end | center | baseline | stretch;  垂直对齐方式

2、项目的属性

order:number   顺序越小越靠前

flex-grow:number  放大比例，默认为0，即便存在剩余空间也不放大，如果全都是1，将等分剩余空间

flex-shrink:number  缩小比例，默认为1，如果空间不足，项目等比例缩小，如果一个项目为0，其他为1，前者不缩小

align-self: auto | flex-start | flex-end | center | baseline | stretch   允许单个项目与其他项目不同的对其方式