关于弹性布局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;  定义子元素放大比例

上一篇下一篇

猜你喜欢

热点阅读