flexbox 剩餘空間分配規則

為了更好地理解本文內容，我們需要先了解下面一些基礎概念。

flexbox 容器又稱彈性容器，通過設定display: flex而產生，簡單示例如下：

.container

當設定乙個元素為 flexbox 容器時，其直接子元素將自動成為容器成員，也可以稱之為：flexbox 專案。

注：因為 flexbox 布局是發生在父元素和子元素之間的，所以下面為了行文方便，統一將 flexbox 容器稱為「父容器」，而 flexbox 專案統一稱為「子元素」

剩餘空間就是指父容器在主軸方向上剩餘未分配的空間，它是 flexbox 布局中乙個很重要的詞。我們可以借助下面的例子來更好地理解：

上面**，我們定義了乙個寬度為600px的父容器 container，以及寬度為200px的子元素 item1 和 item2 ，那麼我們得出其剩餘空間為200px，計算公式為：

剩餘空間 = 父容器的寬度 - item1的寬度 - item2的寬度

flexbox 布局中的子元素可以通過設定flex屬性來改變其所分配到的空間大小。flex屬性包括了flex-basis、flex-grow、flex-shrink

flex-basis 用來定義子元素的預設寬或高。如果父容器flex-direction屬性的方向為水平方向則為寬度，如為垂直方向則為高度。相當於給子元素設定寬或高。如果同時設定了該屬性與寬或高，則該屬性權重大於寬或高的值。

flex-grow 用來指定父容器多餘空間的分配比率，預設值為0。看到這裡，大家可能還是沒有概念。為了更形象地理解，我們一起看下下面的例子。

例子：只設定 item1 的 flex-grow 為1

其 html **如下：

<
div 
class
="container"
>
<
span 
class
="item item-flex-grow"
>item1
span
>
<
span 
class
="item item2"
>item2
span
>
div>

其 css **如下：

css 部分

*/.container .item .item2 .item-flex-grow

這裡我們對 item1 設定flex-grow:1後，我們可以看到 item1 的所佔空間寬度變成400px，也就是說 item1 把之前我們所說的父容器剩餘的200px空間都占用了。

在這裡我們可以得出：其實 flex-grow 即定義如何去分配父容器的剩餘空間，當值為0時，則子元素都不會索取父容器的剩餘空間。當 item1 設定flex-grow: 1的時候，由於 item2 沒有設定 flex-grow 的值，則剩餘空間將會被分成乙份，並且分別分給了 item1。

例子：設定 item1 的 flex-grow 為1，且 item2 的 flex-grow 為3

如果此時我們設定 item2 的flex-grow:3，item2 也將會參與索取父容器的剩餘空間，此時父容器的剩餘空間將分為4份，然後1份分配到 item1，而分配3份到 item2，如下圖：

如果子元素的寬度的總和超過父容器，flex-grow 將不生效。

上面的例子，我們只考慮了子元素的寬度總和都是沒有超過父容器的寬度的情況，則其可以使用 flex-grow 來分配父容器的剩餘空間。那麼當子元素的寬度總和超過父容器的寬度時，這時剩餘空間還可以分配嗎？此時 flex-grow 是否還有效呢？讓我們先看看下面的例子：

這裡我們設定上面例子的 item1 和 item2 的寬度為350px，則子元素的寬度總和為700px且超過父容器container的600px寬度。

我們可以看到 flex-grow 並沒有起到作用，且兩個 item 的寬度還被壓縮到只有300px。

通過之前學到的如何計算剩餘空間的方法，我們可以算出本例子的剩餘空間為600px - 700px即 -100px,這裡可以得出由於沒有剩餘空間，則定義了 flex-grow 的子元素能分配到的空間為0，故不生效。另外我們需要知道的是 flexbox 環境的父容器的寬度600px並不會因為子元素的總寬而改變，即子元素的寬度總和最多等於父容器的寬度，所以為了讓子元素完整顯示在父容器內，只有兩個辦法：

flex-shrink 用來指定父容器空間不夠時子元素的縮小比例，預設為1。如果乙個 flexbox 專案的 flex-shrink 屬性為0，則該元素不會被壓縮。

為什麼需要 flex-shrink 來定義縮小比例呢？

上面我們可以知道，當子元素的寬度總和大於 flexbox 父容器的寬度時，其剩餘空間將為負數，如果沒有設定換行的情況下，其將會通過壓縮子元素來使其能夠容納在父容器內。那麼我們如何控制子元素的壓縮比例呢？答案就是通過將通過設定flex-shrink這個屬性。

例子：設定專案的flex-shrink

下面例子，我們設定兩個 item 的寬度為350px，而容器 container 的寬度仍為600px。同時定義了 item1 和 item2 的 flex-shrink 的屬性分別為1和4。如下所示：

**如下：

這裡只展示關鍵css

*/.container .item .item1 .item2

我們看到由於缺少100px的空間，按照 item1 和 item2 定義的 flex-shrink 的值，缺少的100px將分成5份。item1 將壓縮其中的 1/5 即20px，item2 的將壓縮其中的 4/5 即80px。

例子：設定專案的 flex-shrink 為0

在上面的知識中，我們了解到 flex-shrink 預設值為1，即預設子元素在父容器空間不足時會被壓縮。現在我們把專案的 flex-shrink 設為0來看下不壓縮的情況。如下所示：

**如下：

這裡只展示關鍵css

*/.container .item

flexbox 剩餘空間分配規則

在Linux下對未分配剩餘空間分割槽

獲取磁碟使用空間和剩餘空間

使用SD卡剩餘空間

flexbox 剩餘空間分配規則

在Linux下對未分配剩餘空間分割槽

獲取磁碟使用空間和剩餘空間

使用SD卡剩餘空間

相關推薦