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