flex布局

flex布局（弹性布局），任何一个容器都可以指定flex布局，在webkit内核的浏览器下必须加上-webkit前缀。行内元素也可以使用flex布局

.flex-contauner{ /*块级元素写法*/ display: flex; -webkit-display: flex; /*行内元素写法*/ display: inline-flex; -webkit-display: inline-flex; }

基本语法：
被flex后的容器会有6个属性
1.flex-direction: row | row-reverse | column | column-reverse，默认值为row，也就是指从左边开始，将容器子元素按照一行排列，row-reverse则相反，从右边开始；column从上边开始，将容器子元素按照一列排列，column-reverse则相反，从下边开始。
2. flex-warp: nowrap | wrap | wrap-reverse，默认值为nowrap，也就是不换行，假若子元素的总共宽度超过了容器宽度，那么这些子元素会均分容器的宽度；wrap是指超过了就会换行，子元素的宽度就是我们用css写的宽度，wrap-reverse则是指在换行时，将第一行放在下面。
3. flex-flow: flex-direction flex-wrap，默认值为row nowrap
4. justify-content: flex-start | flex-end | center | space-between | space around，主轴对齐方式，默认值为flex-start，flex-start 是指左对齐，flex-end是指右对齐，center是指居中（将所有子元素视为一个整体，然后将这个整体margin： auto），space-between是指两端对齐，子元素之间间隔相等，space-around 两侧间隔相等，也就是说每个子元素的margin-left与margin-right是相等的。
5. align-items: flex-start | flex-end | center | baseline | stretch，交叉轴上如何对齐，默认值为strentch，在未指定子元素高度时，高度与容器高度相等，指定高度后的效果与flex-start类似，flex-start是指由起点开始，flex-end是指由终点开始，center是指以轴的中线为基线对齐，baseline是指以子元素内第一行文字基线来对齐。
6. align-content：flex-start | flex-end | center | space-around | space-between | stretch | center，加入只有一根轴线的话，该属性并不起作用。这些属性与align-items类似，只不过把主体换为了轴线，而不是子元素。

子元素对应也有6个属性：

order: -2;   /*顺序,数值越大,越靠前,默认值为0*/
flex-grow: 0.1; /*放大比例(如果存在剩余空间),默认值为0*/
flex-shrink: 0;/*缩小比例,默认值为1,不接受负数,假如空间不足的时候,会等比例缩小,但是为0的将不会缩小*/
flex-basis: 150px; /*子元素占据的主轴空间,默认值为auto,设置了这个值就相当于设置了width属性*/
flex:/*上面三种的简写,默认值为0 1 auto*/ align-self: stretch; /*与align-items属性相同*/

附有css练习：https://github.com/zp1996/css-/tree/master/FlexLayout