Flex Box 概念梳理

SamChord發表於2018-11-01

Flex

前言

最近重新學習了一下Flex Box，把知識點和相關概念做了一個梳理。加深記憶，方便回顧。

參考內容：

Flex Box

Flexible Box 模型，通常被稱為 flexbox，是一種一維的佈局模型。

之所以說 flexbox 是一種一維的佈局，是因為一個 flexbox 一次只能處理一個維度上的元素佈局，一行或者一列。作為對比的是另外一個二維佈局 CSS Grid Layout，可以同時處理行和列上的佈局。

採用 Flex 佈局的元素，稱為 Flex 容器（flex container），容器裡的子元素稱為專案（item）。

1.容器

概念

從容器的角度來看，有兩個不變的軸，主軸由 flex-direction 定義，另一根軸始終垂直於它。預設定義是：

1) 水平方向的主軸（main axis），主軸開始位置稱為main start，結束位置稱為 main end

2) 垂直方向的交叉軸（cross axis），交叉軸開始位置稱為 cross start，結束位置稱為 cross end

相關屬性
- flex-direction：定義了主軸方向。決定容器內專案排列方向，預設從左到右row。如果你選擇了 row 或者 row-reverse，你的主軸將沿著 inline(行級)方向延伸；選擇 column 或者 column-reverse 時，你的主軸會沿著上下方向延伸 — 也就是 block(塊級) 排列的方向。
```
flex-direction：row | row-reverse | column | column-reverse
複製程式碼
```
  特別注意：flex-direction設定後會引起主軸和交叉軸方向改變。

flex-wrap：決定容器主軸方向上專案是否換行，預設不換行nowrap。reverse表示逆序。
```
flex-wrap: nowrap | wrap | wrap-reverse;
複製程式碼
```

flex-flow：是flex-direction 和flex-wrap屬性的簡寫。預設為：row nowrap。
```
flex-flow: <flex-direction> || <flex-wrap>;
複製程式碼
```

justify-content：決定容器內專案在主軸上對齊方式。預設左對齊 flex-start。

justify-content: flex-start | flex-end | center | space-between | space-around;
/**
* flex-start（預設值）：左對齊。專案堆放在容器主軸開始位置(main start)；
* flex-end：右對齊。專案堆放在容器主軸結束位置(main end)；
* center： 居中。專案沿著主軸居中排列；
* space-between：兩端對齊，專案之間的間隔都相等。
* space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
**/
複製程式碼

align-items：決定容器內專案在交叉軸上對齊方式。預設為stretch。

align-items: flex-start | flex-end | center | baseline | stretch;
/**
* flex-start：交叉軸的起點對齊。
* flex-end：交叉軸的終點對齊。
* center：交叉軸的中點對齊。
* baseline: 專案的第一行文字的基線對齊。
* stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
**/
複製程式碼

align-content：決定容器內專案在交叉軸上內容與剩餘空間對齊方式。預設為 stretch。

特別注意：該屬性只對設定了`flex-wrap:wrap`的容器生效，並且容器裡的元素構成了多行。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/**
* flex-start：與交叉軸的起點對齊。
* flex-end：與交叉軸的終點對齊。
* center：與交叉軸的中點對齊。
* space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
* space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
* stretch（預設值）：軸線佔滿整個交叉軸。
**/
複製程式碼

案例參考地址：codepen.io/pen/

2.專案

概念

專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
相關屬性
- order：定義專案在容器主軸方向上的排列順序，數值越小排列越靠前。預設為 0 。
```
order: <integer>;
複製程式碼
```

flex-grow：定義專案基於 flex-basis 放大比例，預設為 0 ，即便容器存在剩餘空間，也不放大。不允許負值。

剩餘空間：元素佔據完容器空間後的佈局空白

flex-grow: <number>; /* default 0 */
/**
* 如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。
* 如果一個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
**/
複製程式碼

flex-shrink：定義專案在容器空間不足時的基於 flex-basis 縮小比例，預設為1，不允許負值。容器空間不足時該專案要縮小，並且專案內容會換行。只有在flex元素總和超出主軸才會生效。

flex-shrink: <number>; /* default 1 */
/**
* 如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。
* 如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
**/
複製程式碼

flex-basis：可以理解成設定專案預設大小。定義專案分配多餘空間之前，在主軸上佔據的空間。預設為auto，即專案內容大小。
```
 flex-basis: <length> | auto; /* default auto */
複製程式碼
```
如果容器內所有專案大小總和超過容器，不設定 wrap 的情況下會溢位容器：

flex：是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex 有幾種預定義的值：
- flex: initial 是把flex元素重置為Flexbox的初始值，它相當於 flex: 0 1 auto。
- flex: auto 等同於 flex: 1 1 auto,表明元素既可以拉伸也可以收縮。
- flex: none 可以把flex元素設定為不可伸縮。它和設定為 flex: 0 0 auto 是一樣的。
- flex: <positive-number> 常看到的 flex: 1 或者 flex: 2 等等。它相當於flex: 1 1 0或 flex:2 2 0。元素可以在以 flex-basis為0的基礎上伸縮。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
align-self：用於設定單個專案在交叉軸上對齊方式，可覆蓋容器的 align-items屬性，預設為 auto。如果值為auto，則計算值為父元素的 ' align-items ' 值，否則為指定值。
```
align-self: auto | flex-start | flex-end | center | baseline | stretch;
複製程式碼
```