重新總結flex佈局（flex，flex-direction，justify-content，align-items，flex-wrap，align-self）

kimingw發表於2018-09-11
Flex

1、flex，主要就是按比例分配。（例如：兩個div的flex:1，就大小相等）

.box1{
    flex:1;
    background-color: red;
}
.box2{
    flex:1;
    background-color: blue;
}

2、flex-direction，幾種排序的方式。

row: child水平方向排列
column: child豎直方向排列(預設)
row-reverse: child水平方向反向排列
column-reverse: child豎直方向反向排列

3、justify-content，幾種橫向內容排序的方式。

flex-start: child對齊主軸的起點(預設)
flex-end: child對齊主軸的終點
center: child居中對齊主軸
space-between: child在主軸方向相鄰child等間距對齊，首尾child與父容器對齊
space-around: child在主軸方向相鄰child等間距對齊，首尾child與父容器的間距相等且為相鄰child間距的一半
space-evenly: child在主軸方向均勻分佈。相鄰間距與首尾間距相等

4、align-items，幾種豎向內容排序的方式。

flex-start: child對齊副軸起點(預設)
flex-end: child對齊副軸終點
center: child居中對齊副軸
stretch: child為彈性佈局時(未設定副軸方向的大小或者為auto)，拉伸對齊副軸
baseline: 有文字存在時，child在副軸方向基於第一個文字基線對齊

5、flex-wrap，換行與不換行。

nowrap: 不換行(預設)
wrap: 自動換行

6、align-self，個別child的特別豎向排序方式。（屬性名和align-items一樣）

 

相關文章