flex布局(弹性盒子)
能自适应屏幕大小,并且对于移动端的开发非常方便
flex的用法
当父元素设置flex时子 元素的float clear vertical-align将失效
给盒子元素添加 display:flex 设置盒子为flex布局
一般是给父容器添加这个属性
父容器添加的属性一般有以下几个
flex-direction:设置主轴的方向
取值: row(默认值):从左到右(第三个)
row-reverse:从右到左(第四个)
colum:从上到下(第二个)
colum-reverse:从下到上(第一个)
flex-wrap:设置当一行放不下元素是是否换行
notwrap:不换行(默认值)
wrap:换行 第二行在第一行下面
wrap-reverse: 第二行再第一行上面 和wrap相反
justify-content: 子元素对其方式
flex-start:在对齐
flex-end:右对齐
center:居中
space-around: 居中效果 中间的间距会比两侧大一倍(中间等于有左元素的间距+右元素间距所以大一倍)
space-between(特殊并且重要): 两边的元素切边 剩下的距离中间元素平分
align-item对单行进行对齐
align-item:这个属性要根据flex-direction的属性
当flex-direction设置为row时 align-item是根据 column进行对齐的
当flex-direction设置为column时 align-item是根据 row进行对齐
简单说就是根据flex-direction相反的值
注意 row-reverse也算是 row
align-item:取值 此时我默认为flex-direction为row
flex-start: 按照column 对齐 (效果:向上对齐)
flex-end:向下对齐
flex-center:按照column居中对齐
stretch: 重直拉伸 把子元素height设置100% 一样的效果(此时子元素不能设置高)
backline:根据第一个元素文字对齐
align-content:对多行元素进行对齐
取值:flex-start:和align-item的一样
flex-end: 参考align-item
flex-center 也是 区别是一个对单行(align-item) 一个多行(align-content)
space-between:上下贴边中间距离平分 (当flex-direction:row时) 为column时相反
space-around: 平分上下距离(当flex-direction:row时) 为column时相反
flex-flow: flex-direction 和 flex-wrap的复合属性
flex-direction:column;
flex-wrap:wrap;
等价于
flex-flow: column wrap
子元素属性
flex:1 表示子元素宽度的份数
order:设置子元素排序的顺序默认0 越小越靠前