flex 是一種布局方式，在 CSS3 之后開始有。它主要由父容器和子項組成，父容器有六個屬性，分別為：

• 控制主軸軸向：flex-direction row：橫軸(默認)row-reverse：倒過來的橫軸column：豎軸column-reverse：倒過來的豎軸。
• 換行方式：flex-wrap nowrap：不換行(默認)wrap：換行wrap-reverse：反著換行。
• 主軸排列：justify-content。
• 交叉軸排列：align-items。
• 軸向與換行組合設置：flex-flow(流向) 一般很少用這個屬性，即改變子項的布局順序，正著來，倒著來。

子項也有六個屬性，分別為：

• 彈性擴展：flex-grow 指定容器剩余空間多余時的分配規則默認值為 0，多余空間不分配。
• 彈性收縮：flex-shrink 指定容器剩余空間不足時的分配規則默認值為 1，空間不足要分配;如果為 0，表示不分配。
• 基礎尺寸：flex-basis 指定 flex 元素在主軸方向上的初始大小(基礎尺寸)默認值為 auto，即項目本身大小
• 縮寫：flex flex-grow、flex-shrink、flex-basis 的縮寫默認值為 0 1 auto。
• 主軸順序：order。
• 交叉軸對齊方式：align-self。

總的來說，父容器控制整體布局，子項控制子項布局。

在面試中，常常不會問怎么寬泛，最常見的 flex 面試題為：

• flex: 0 1 auto 怎么理解?
• flex: 1具體代表什么，有什么應用場景。
• flex: 0、flex: 1、flex: none、flex: auto，表示什么意思，并應用在什么場景下使用?

要想回答這些問題，我們必須了解子項中的 flex 屬性。

flex 語法

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

單管道符 | ，表示排他。也就是這個符號前后的屬性值都是支持的，且不能同時出現。因此，下面這些語法都是支持的：

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

方括號 [...] 表示范圍。支持的屬性在這個范圍內。

其中 ? ，表示 0 個或者 1 個，也就是說 flex-shrink 屬性可有可無。因為 flex 屬性值也可以是 2 個值。

flex: auto;
flex: none;
/* 2個值 */
flex: 1 100px;
/* 3個值 */
flex: 1 1 100px;

雙管道 || ，表示”或者“的意思。表示前后可以分開獨立使用，也就是 flex: flex-grow flex-shrink? 和 flex-basis 都是合法的。于是我們又多了 2 種合法的寫法：

/* 1個值，flex-basis */
flex: 100px;
/* 2個值，flex-grow 和 flex-shrink */
flex: 1 1;

轉為文字表述

單值語法：

如果 flex 的屬性值只有一個值，有三種情況：

• 一個無單位數，例如例如 flex: 1，表示 flex-shrink: 1，剩余空間擴展。此時，flex-shrink 和 flex-basis 的值分別是 1 和 0%。注意，這里的 flex-basis 的值是 0%，而不是默認值 auto 只要改變 flex: 數字，flex-basis 的值就為 0。
• 一個有效的寬度(width)值，表現形式為長度值，例如 flex: 100px，表示flex-basis: 100px，基礎尺寸為 100px。此時，flex-grow 和 flex-shrink 的值都是 1，注意，這里的 flex-grow 的值是 1，而不是默認值 0。
• 關鍵字 none，auto 或 initial。

雙值語法：

如果 flex 的屬性值有兩個值，則第 1 個值一定是 flex-grow，第 2 個根據值的類型不同表示不同的 CSS 屬性，具體規則如下：

• 數值：例如flex: 1 2，則這個 2 表示 flex-shrink，此時 flex-basis 的值為 0%，而非默認值 auto。
• 長度值，例如flex: 1 100px，則這個 100px 值 flex-basis，此時 flex-shrink 默認值為 0。

三值語法：

如果 flex 的屬性值有 3 個值，則長度值表示 flex-basis，其余 2 個數值分別表示flex-grow 和 flex-shrink。下面兩行 CSS 語句的語法都是合法的，且含義也是一樣的：

flex: 1 2 50%;
flex: 50% 1 2;

flex 屬性值場景應用

flex 默認值為 0 1 auto。除此之外，還有各種其他值：

• flex: none，等同于 flex: 0 0 auto。
• flex: auto，等同于 flex: 1 1 auto。
• flex: 1，等同于 flex: 1 1 0%。
• flex: 0，等同于 flex 0 1 0%。

張鑫旭大神畫過一張圖：

單值語法 等同于 備注 flex: initial flex: 0 1 auto 初始值，常用 flex: 0 flex: 0 1 0% 適用場景少 flex: none flex: 0 0 auto 推薦 flex: 1 flex: 1 1 0% 推薦 flex: auto flex: 1 1 auto 適用場景少。

默認值 flex: initial

它等同于 flex:0 1 auto，表示 flex 容器有剩余空間時尺寸不增長(flex-grow: 0)，flex 容器尺寸不足時尺寸會收縮變小(flex-shrink:1)，尺寸自適應于內容(flex-basis:auto)。

我的理解：子項總長度小于總容器時，不會去撐滿(flex-grow:0)，而按實際寬高度存在(flex-basis:auto);當子項總長度大于總容器時，子項會相對于的收縮相對比例(flex-shrink:1)。

適用場景

適用于子項總長度小于總容器的場景，例如按鈕、標題、小圖標等小部件的排版布局。

flex: 0 和 flex: none 的區別

• flex: 0 等同于設置 flex: 0 1 0%，flex:none 等同于 flex: 0 0 auto。
• flex: 0，因為是一個值且為數值，所以它表示 flex-grow，后續我發現只用設置了flex: 數字，那么 flex-basis 就自動成了 0%，所以，設置flex:0 的元素的最終尺寸表示為最小內容寬度。

注意：

• flex: 1 === flex: 1 1 0%。
• flex: 0 === flex: 0 1 0%。
• flex 設置為數字后，雖然 flex-basis 為最小寬度，但是前者的 flex-grow 有值，可以把子項擴充滿容器，后者為 0，不擴展。

flex: none，既不是數值也不是長度值，none 關鍵字。flex: 0 0 auto 表示元素尺寸不會收縮也不會擴展，再加上 flex-basis: auto 表示固定尺寸由內容決定，由于元素不具有彈性，因為，元素內的元素不會換行，最終尺寸通常表現為最大內容寬度。

適用使用 flex: 0 的場景

flex：0的應用場景。

無論文字的內容給如何設置，左側內容的寬度都是圖像的寬度。

適合使用 flex: none 的場景

當 flex 子項的寬度就是內容的寬度，且內容永遠不會換行，則適合使用 flex:none，例如如下的場景，圖片和按鈕固定長度，內容彈性。

flex:none適用場景。

flex: 1 和 flex: auto 的區別和適用場景

flex:1 等同于設置 flex: 1 1 0% ，flex: auto 等同于 flex: 1 1 auto。

可以看出兩者的 flex-grow 和 flex-shrink 都是一樣的，意味著它們都可以彈性擴展以及彈性收縮，區別在于 flex: 1 中 flex-basis 為 0，即寬度為 0。flex:auto 中的 flex-basis為 auto，即寬度為自身寬度。

表現的樣子為：

flex:1。

這里需要解釋一下，因為我最開始也不理解，其公式為：

每個子項的寬度 = (總寬度 - flex-basis 的寬度)/ 3(以這個例子為例)。

因為 flex:1 的 flex-basis 的寬度為 0 ，所以最后它的總寬度擴張或者收縮時每個子項都能等分。

適用于 flex: 1 的場景

當希望元素充分利用剩余空間，同時不會侵占其他元素應用的寬度的適用，適合適用 flex:1，例如所有的等分列表。

之前適用 flex: none 的例子，同樣設置文字部分flex: 1 也能實現類似的效果。

flex:1。

適用于 flex: auto 的場景

當希望元素充分利用剩余空間，但是各自的尺寸按照各自內容進行分配的時候，適用于 flex: auto。

例如導航數量不固定，每個導航文字數量頁不固定的導航效果就適合適用 flex: auto。

flex-auto。

回過頭來看之前說的面試題

1. flex: 0 1 auto 怎么理解?
2. flex: 1具體代表什么，有什么應用場景。
3. flex: 0、flex: 1、flex: none、flex: auto，表示什么意思，并應用在什么場景下使用?

第一個問題回答。

flex 的默認值為 0 1 auto，表示容器剩余空間有多余的時候不擴展，不足的時候收縮，子項的寬度根據自身的寬度來展示。

第二個問題回答。

腦子思考 flex 的值如果是一個值且為數字，說明是 flex-grow:1，當它為數字時，flex-basis 會自動變成 0，所以它具體表示為 flex:1 1 0%，表示容器剩余空間有多余的時候擴展，不足的時候收縮，子項的寬度為 0。它一般適用于充分利用剩余空間，又不侵占其他元素的寬度，例如等分布局。

第三個問題回答。

flex:0，表示 flex: 0 1 0%，表示容器剩余空間有多余的時候不擴展，不足的時候收縮，子項的寬度為 0，適用設置在替換元素的父元素上。

flex:1，看第二個回答。

flex: none，表示 flex: 0 0 auto，表示容器剩余空間有多余的時候不擴展，不足的時候也不收縮，子項的寬度為自身寬度，適用于不換行的內容或者較少的小控件元素上。

flex: auto，表示 flex: 1 1 auto，表示容器剩余空間有多余的時候擴展，不足的時候收縮，子項的寬度為自身寬度，適用于基于內容動態適配的布局(例如導航數量文字長度不固定)。

flex:initial，表示 flex: 0 1 auto，表示容器剩余空間有多余的時候不擴展，不足的時候收縮，子項的寬度為自身寬度，適用于小控件元素的分布布局，或者某一項內容動態變化的布局。

參考資料

• flex:0 flex:1 flex:none flex:auto 應該在什么場景下使用?
• CSS flex 屬性深入理解。
• MDN Web Docs flex。
• 一勞永逸的搞定 flex 布局。