九、弹性布局flex 1、给父盒子加dispaly:flex

九、弹性布局flex

1、给父盒子加dispaly:flex   

这三个属性将失效float  、  vertical-align 、  clear

子元素高默认与父元素等高，flex布局下的子元素默认不会换行，子元素的宽度总和比父元素多的时候会自动压缩。

2、flex-flow

flex-flow:row wrap; 这是flex-direction 和flex-direction 的复合属性

（1）flex-direction:设置主轴的方向（不设置的时候，默认是x轴）

row从左到右，row-reverse从右到左

column从上到下，column-reverse从下到上

（2）flex-wrap:nowrap; 不换行，wrap换行

3、justify-content

justify-content: 设置主轴上元素的排列方式

（1）justify-content：flex-start; 从头到尾排列，

（2）justify-content：flex-end; 从尾到头排列

（3）justify-content：center； 让元素在主轴居中（如果为x轴，则水平居中）

（4）justify-content：space-around；子元素等均分配剩余空间

（5）justify-content：space-between;最外两边子元素贴边，再平分剩余空间

4、align-content 

align-content设置侧轴上的子元素的排列方式，只能用于多行

（1）align-items：flex-start;从侧轴头部开始排

（2）align-items：flex-end；从侧轴尾部开始排

（3）stretch 拉伸（子元素平分父元素高度）

（4）align-content：center；在侧轴中间显示

（5）align-content：space-around：让子元素在侧轴上平分剩余空间

（6）alin-content：between；让子元素在侧轴两头贴边，其余平分剩余空间

5、align-items

align-items设置侧轴上的子元素排列方式（单行）

（1）align-items：stretch；拉伸

（2）align-items：flex-start;从侧轴头部开始排

（3）align-items：flex-end；从侧轴尾部开始排

（4）align-items：center；在侧轴中居中显示

在侧轴上设置元素排列时，建议：单行找align-items ，多行找align-content