九、弹性布局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