关于弹性布局display:flex你想知道的属性
2018-06-15 本文已影响101人
今天又要上班吗
父级身上其他属性:
display:flex
一,justify-content: 子元素水平排列的方式
1⃣️,center 居中
2⃣️,space-between 两端对齐
3⃣️,space-around 子元素拉手分布
4⃣️,flex-start 居左
5⃣️,flex-end 居右
二,align-items : 子元素的垂直居中的排列方式
1⃣️,center 居中
2⃣️,flex-end 底部
3⃣️,flex-start 开始
三,align-content :多行的时候,子元素的垂直排列方式
1⃣️,center 居中
2⃣️,flex-end 底部
3⃣️,flex-start 开始
4⃣️,flex-direction: 排列方式row 横向排列
5⃣️,row-reverse 横向反向排列
column 纵向排列column-reverse 纵向反向排列
四,flex-wrap : 子元素是否在一行显示
1⃣️,no-wrap 不换行
2⃣️,wrap 换行
子元素身上的属性:
一,flex:1 1指的是一个系数
* 子元素在划分父元素宽度,先去除固定宽度
二,align-self 其实就是用来覆盖父级align-items的垂直排列
三,flex-grow:1; 定义子元素放大比例