思維導圖
flex 佈局
型別
- display: flex;(本文章為此為主)
- display；inline-flex;
屬性
- 父節點 容器flex-container
- 子節點 flex-item
父節點容器
- flex-direction 主軸方向(一般水平方向)
- flex-warp 處理一行排列不足的問題
- flex-flow 1和2的簡寫（flex-flow: row nowrap）
- justify-content 主軸(水平方向)對齊方式
- align-items 與主軸的交叉軸（豎方向）對齊方式
- align-content 多行在交叉軸軸上的對齊方式
子節點專案
- order 值是整數，預設為0，整數越小，item排列越靠前
- flex-grow 是其他item的放大倍數
- flex-shrink 但空間不足，按照比例被消化, 需在父節點容器中設定flex-basis寬度
- flex-basis 規定item專案的寬度
- flex 是flex-grow flex-shrink flex-basis的總和
- align-self 允許item自己在交叉軸(豎方向)有對齊方式
父節點容器
- flex-direction 主軸方向(一般水平方向)
- flex-warp 處理一行排列不足的問題
- flex-flow 1和2的簡寫（flex-flow: row nowrap）
- justify-content 主軸(水平方向)對齊方式
- align-items 與主軸的交叉軸（豎方向）對齊方式
- align-content 多行在交叉軸軸上的對齊方式
html案例程式碼：
<div class="flex-container">
<div class="flex-item red">
1
</div>
<div class="flex-item green">
2
</div>
<div class="flex-item yellow">
3
</div>
<div class="flex-item black">
4
</div>
</div>
複製程式碼css案例程式碼：
html,body{
background: #f7f7f7;
}
.flex-container{
display: flex
color: #fff;
}
.flex-item{
width: 150px;
height: 100px;
}
.red{
background: red;
}
.green{
background: green;
}
.yellow{
background: yellow;
}
.black{
background: black;
}
複製程式碼頁面如下：
flex-direction
決定主軸(一般是x軸)的方向，即專案排列的方向，有四個可能的值：row(預設)| row-reverse | column | column-reverse
- row:主軸為水平方向，專案沿主軸從左至右排列
- column：主軸為豎直方向，專案沿主軸從上至下排列
- row-reverse：主軸水平，專案從右至左排列，與row反向
- column-reverse：主軸豎直，專案從下至上排列，與column反向
.flex-container{
display: flex;
height: 100px;
flex-direction: row; /* 1 */
flex-direction: row-reverse; /* 2 */
flex-direction: column; /* 3 */
flex-direction: column-reverse;/* 4*/
color: #fff;
}
.flex-item{
flex: 1
}
複製程式碼
flex-wrap
預設情況下，item排列在一條線上，即主軸上，flex-wrap決定當排列不下時是否換行以及換行的方式，可能的值nowrap(預設) | wrap | wrap-reverse
- nowrap：自動縮小專案，不換行
- wrap：換行，且第一行在上方
- wrap-reverse：換行，第一行在下面
.flex-container{
display: flex;
color: #fff;
flex-wrap: nowrap; /* 1 */
flex-wrap: wrap; /* 2 */
flex-wrap: wrap-reverse; /* 3 */
}
.flex-item{
width: 150px;
height: 100px;
}
.red{
width: 300px;
}
複製程式碼備註： flex-item寬度定義分別是300px 150px 150px 150px; 所以按照比例2：1：1：1來分割父節點寬度，實際寬度為 150px 75px 75px 75px (合計375px)
flex-flow
是flex-direction和flex-wrap的簡寫形式，如：row wrap | column wrap-reverse等。預設值為row nowrap，即橫向排列 不換行。
.flex-container{
flex-flow: row nowrap;
}
複製程式碼組合：
| flex-flow | nowrap | wrap | wrap-reverse |
|---|---|---|---|
| row | 1、row nowrap | 5、row wrap | 9、row wrap-reverse |
| column | 2、column nowrap | 6、column wrap | 10、column wrap-reverse |
| row-reverse | 3、row-reverse nowrap | 7、row-reverse wrap | 11、row-reverse wrap-reverse |
| column-reverse | 4、column-reverse nowrap | 8、column-reverse wrap | 12、column-reverse wrap-reverse |
第一種：當flex-wrap設定為nowrap時，屬性(寬度比例，非px實際寬度)按照flex-direction來排列
第二種：當flex-wrap設定為wrap時，item則按照實際寬度排列，不足則到下行
第三種：當flex-wrap設定為wrap-reverse時， item則按照實際寬度排列，不足則到上行
justify-content
非常重要，決定item在主軸上的對齊方式，可能的值有flex-start（預設），flex-end，center，space-between，space-around。
當主軸沿水平方向時，具體含義為
- flex-start：左對齊
- flex-end：右對齊
- center：居中對齊
- space- between：兩端對齊
- space-around：沿軸線均勻分佈
備註： 當專案item不滿父節點item-container時，flex-start, flex-end不起到作用
.flex-container{
justify-content: flex-start; /* 1 */
justify-content: flex-end; /* 2 */
justify-content: center; /* 3 */
justify-content: space-between; /* 4 */
justify-content: space-around; /* 5 */
}
.flex-item{
width: 50px;
height:50px;
}
複製程式碼
align-items
決定了item在交叉軸上(Y軸)的對齊方式，可能的值有flex-start | flex-end | center | baseline | stretch
當主軸水平(Y軸)時，其具體含義為：
- flex-start：頂端對齊
- flex-end：底部對齊
- center：豎直方向上居中對齊
- baseline：item第一行文字的底部對齊
- stretch：當item未設定高度時，item將和容器等高對齊
備註：父節點flex-container與子節點flex-item存在高度差，才能起到作用
.flex-container{
height: 200px;
align-items: flex-start; /* 1 */
align-items: flex-end; /* 2 */
align-items: center; /* 3 */
align-items: baseline; /* 4 */
align-items: stretch; /* 5 */
}
.flex-item{
height: 100px;
}
.red,.green{
font-size: 14px;
}
複製程式碼
align-content
該屬性定義了當有多根主軸時，即item不止一行時，多行在交叉軸軸上的對齊方式。注意當有多行時，定義了align-content後，align-items屬性將失效。
align-content可能值含義如下（假設主軸為水平方向）：
- flex-start：左對齊
- flex-end：右對齊
- center：居中對齊
- space- between：兩端對齊
- space-around：沿軸線均勻分佈
- stretch：各行將根據其flex-grow值伸展以充分佔據剩餘空間
備註：1、設定flex-wrap：wrap，不然預設nowrap按照比例排滿一行。
2、父節點flex-container與子節點flex-item存在高度差，才能起到作用
.flex-container{
flex-wrap: wrap;
height:300px;
background: #969799;
align-content: flex-start; /* 1 */
align-content: flex-end; /* 2 */
align-content: center; /* 3 */
align-content: space-between; /* 4 */
align-content: space-between; /* 5 */
align-content: stretch; /* 6 */
}
複製程式碼
子節點專案
item的屬性在item的style中設定。item共有如下六種屬性
- order 值是整數，預設為0，整數越小，item排列越靠前
- flex-grow 是其他item的放大倍數
- flex-shrink 但空間不足，按照比例被消化,需在父節點容器中設定flex-basis寬度
- flex-basis 規定item專案的寬度
- flex 是flex-grow flex-shrink flex-basis的總和
- align-self 允許item自己在交叉軸(豎方向)有對齊方式
order
order的值是整數，預設為0，整數越小，item排列越靠前
.flex-container{
flex-flow: wrap;
}
.flex-items{
order:1;
}
複製程式碼flex-grow
定義了當flex容器有多餘空間時，item是否放大。預設值為0，即當有多餘空間時也不放大；可能的值為整數，表示不同item的放大比例
備註：item專案未規定寬度，則分配一行寬度，即使規定了寬度也分配多餘空間
.flex-item{
flex-grow: 1;
}
/* 1 */
.flex-contanier{
flex-wrap: wrap;
}
/* 2 */
.flex-contanier{
flex-wrap: nowrap;
}
複製程式碼
flex-shrink
定義了當容器空間不足時，item是否縮小。預設值為1，表示當空間不足時，item自動縮小，其可能的值為整數，表示不同item的縮小比例。
備註：這個比較懵逼，待解析
flex-basis
表示專案在主軸上佔據的空間，預設值為auto。
.red{
flex-basis: 100px;
}
.green {
flex-basis: 100px;
}
複製程式碼
flex
flex屬性是flex-grow、flex-shrink和flex-basis三屬性的簡寫總和
具體檢視以上三個
align-self
align-self屬性允許item有自己獨特的在交叉軸上的對齊方式，它有六個可能的值，預設值為auto
- auto：和父元素align-self的值一致
- flex-start：頂端對齊
- flex-end：底部對齊
- center：豎直方向上居中對齊
- baseline：item第一行文字的底部對齊
- stretch：當item未設定高度時，item將和容器等高對齊
備註：與父節點flex-container中的align-item, align-content同個意思，不同的是align設定的是單個的，而align-items設定的
.green{
align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;
}
複製程式碼
備註：align-self: baseline; align-self: stretch; 與1 2一樣在此不做多介紹，可以參考align-items
總結
在實際專案中，關於flex這麼多屬性，能用到的比較少，常用的就那幾個，記住這幾個基本在專案開發中能夠很好的實現佈局
常用屬性
- justify-content
- align-items
- flex
| 屬性 | 場景 | 常用值 |
|---|---|---|
| justify-content | 水平居中，左右浮動，左右間隙分開 | flex-end center space- between space- around |
| align-items | 垂直居中 | center |
| flex | item子元素的寬度比例分配 | flex:1 1 100px / flex: 2等等 |
有不足之處，請評論留言... 謝謝