flex 是一種布局方式，在 CSS3 之后開(kāi)始有。它主要由父容器和子項(xiàng)組成，父容器有六個(gè)屬性，分別為：

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

子項(xiàng)也有六個(gè)屬性，分別為：

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

總的來(lái)說(shuō)，父容器控制整體布局，子項(xiàng)控制子項(xiàng)布局。

在面試中，常常不會(huì)問(wèn)怎么寬泛，最常見(jiàn)的 flex 面試題為：

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

要想回答這些問(wèn)題，我們必須了解子項(xiàng)中的 flex 屬性。

flex 語(yǔ)法

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

單管道符 | ，表示排他。也就是這個(gè)符號(hào)前后的屬性值都是支持的，且不能同時(shí)出現(xiàn)。因此，下面這些語(yǔ)法都是支持的：

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

方括號(hào) [...] 表示范圍。支持的屬性在這個(gè)范圍內(nèi)。

其中 ? ，表示 0 個(gè)或者 1 個(gè)，也就是說(shuō) flex-shrink 屬性可有可無(wú)。因?yàn)?flex 屬性值也可以是 2 個(gè)值。

flex: auto;
flex: none;
/* 2個(gè)值 */
flex: 1 100px;
/* 3個(gè)值 */
flex: 1 1 100px;

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

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

轉(zhuǎn)為文字表述

單值語(yǔ)法：

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

• 一個(gè)無(wú)單位數(shù)，例如例如 flex: 1，表示 flex-shrink: 1，剩余空間擴(kuò)展。此時(shí)，flex-shrink 和 flex-basis 的值分別是 1 和 0%。注意，這里的 flex-basis 的值是 0%，而不是默認(rèn)值 auto 只要改變 flex: 數(shù)字，flex-basis 的值就為 0。
• 一個(gè)有效的寬度(width)值，表現(xiàn)形式為長(zhǎng)度值，例如 flex: 100px，表示flex-basis: 100px，基礎(chǔ)尺寸為 100px。此時(shí)，flex-grow 和 flex-shrink 的值都是 1，注意，這里的 flex-grow 的值是 1，而不是默認(rèn)值 0。
• 關(guān)鍵字 none，auto 或 initial。

雙值語(yǔ)法：

如果 flex 的屬性值有兩個(gè)值，則第 1 個(gè)值一定是 flex-grow，第 2 個(gè)根據(jù)值的類(lèi)型不同表示不同的 CSS 屬性，具體規(guī)則如下：

• 數(shù)值：例如flex: 1 2，則這個(gè) 2 表示 flex-shrink，此時(shí) flex-basis 的值為 0%，而非默認(rèn)值 auto。
• 長(zhǎng)度值，例如flex: 1 100px，則這個(gè) 100px 值 flex-basis，此時(shí) flex-shrink 默認(rèn)值為 0。

三值語(yǔ)法：

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

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

flex 屬性值場(chǎng)景應(yīng)用

flex 默認(rèn)值為 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%。

張?chǎng)涡翊笊癞?huà)過(guò)一張圖：

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

默認(rèn)值 flex: initial

它等同于 flex:0 1 auto，表示 flex 容器有剩余空間時(shí)尺寸不增長(zhǎng)(flex-grow: 0)，flex 容器尺寸不足時(shí)尺寸會(huì)收縮變小(flex-shrink:1)，尺寸自適應(yīng)于內(nèi)容(flex-basis:auto)。

我的理解：子項(xiàng)總長(zhǎng)度小于總?cè)萜鲿r(shí)，不會(huì)去撐滿(mǎn)(flex-grow:0)，而按實(shí)際寬高度存在(flex-basis:auto);當(dāng)子項(xiàng)總長(zhǎng)度大于總?cè)萜鲿r(shí)，子項(xiàng)會(huì)相對(duì)于的收縮相對(duì)比例(flex-shrink:1)。

適用場(chǎng)景

適用于子項(xiàng)總長(zhǎng)度小于總?cè)萜鞯膱?chǎng)景，例如按鈕、標(biāo)題、小圖標(biāo)等小部件的排版布局。

flex: 0 和 flex: none 的區(qū)別

• flex: 0 等同于設(shè)置 flex: 0 1 0%，flex:none 等同于 flex: 0 0 auto。
• flex: 0，因?yàn)槭且粋€(gè)值且為數(shù)值，所以它表示 flex-grow，后續(xù)我發(fā)現(xiàn)只用設(shè)置了flex: 數(shù)字，那么 flex-basis 就自動(dòng)成了 0%，所以，設(shè)置flex:0 的元素的最終尺寸表示為最小內(nèi)容寬度。

注意：

• flex: 1 === flex: 1 1 0%。
• flex: 0 === flex: 0 1 0%。
• flex 設(shè)置為數(shù)字后，雖然 flex-basis 為最小寬度，但是前者的 flex-grow 有值，可以把子項(xiàng)擴(kuò)充滿(mǎn)容器，后者為 0，不擴(kuò)展。

flex: none，既不是數(shù)值也不是長(zhǎng)度值，none 關(guān)鍵字。flex: 0 0 auto 表示元素尺寸不會(huì)收縮也不會(huì)擴(kuò)展，再加上 flex-basis: auto 表示固定尺寸由內(nèi)容決定，由于元素不具有彈性，因?yàn)?，元素?nèi)的元素不會(huì)換行，最終尺寸通常表現(xiàn)為最大內(nèi)容寬度。

適用使用 flex: 0 的場(chǎng)景

flex：0的應(yīng)用場(chǎng)景。

無(wú)論文字的內(nèi)容給如何設(shè)置，左側(cè)內(nèi)容的寬度都是圖像的寬度。

適合使用 flex: none 的場(chǎng)景

當(dāng) flex 子項(xiàng)的寬度就是內(nèi)容的寬度，且內(nèi)容永遠(yuǎn)不會(huì)換行，則適合使用 flex:none，例如如下的場(chǎng)景，圖片和按鈕固定長(zhǎng)度，內(nèi)容彈性。

flex:none適用場(chǎng)景。

flex: 1 和 flex: auto 的區(qū)別和適用場(chǎng)景

flex:1 等同于設(shè)置 flex: 1 1 0% ，flex: auto 等同于 flex: 1 1 auto。

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

表現(xiàn)的樣子為：

flex:1。

這里需要解釋一下，因?yàn)槲易铋_(kāi)始也不理解，其公式為：

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

因?yàn)?flex:1 的 flex-basis 的寬度為 0 ，所以最后它的總寬度擴(kuò)張或者收縮時(shí)每個(gè)子項(xiàng)都能等分。

適用于 flex: 1 的場(chǎng)景

當(dāng)希望元素充分利用剩余空間，同時(shí)不會(huì)侵占其他元素應(yīng)用的寬度的適用，適合適用 flex:1，例如所有的等分列表。

之前適用 flex: none 的例子，同樣設(shè)置文字部分flex: 1 也能實(shí)現(xiàn)類(lèi)似的效果。

flex:1。

適用于 flex: auto 的場(chǎng)景

當(dāng)希望元素充分利用剩余空間，但是各自的尺寸按照各自?xún)?nèi)容進(jìn)行分配的時(shí)候，適用于 flex: auto。

例如導(dǎo)航數(shù)量不固定，每個(gè)導(dǎo)航文字?jǐn)?shù)量頁(yè)不固定的導(dǎo)航效果就適合適用 flex: auto。

flex-auto。

回過(guò)頭來(lái)看之前說(shuō)的面試題

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

第一個(gè)問(wèn)題回答。

flex 的默認(rèn)值為 0 1 auto，表示容器剩余空間有多余的時(shí)候不擴(kuò)展，不足的時(shí)候收縮，子項(xiàng)的寬度根據(jù)自身的寬度來(lái)展示。

第二個(gè)問(wèn)題回答。

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

第三個(gè)問(wèn)題回答。

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

flex:1，看第二個(gè)回答。

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

flex: auto，表示 flex: 1 1 auto，表示容器剩余空間有多余的時(shí)候擴(kuò)展，不足的時(shí)候收縮，子項(xiàng)的寬度為自身寬度，適用于基于內(nèi)容動(dòng)態(tài)適配的布局(例如導(dǎo)航數(shù)量文字長(zhǎng)度不固定)。

flex:initial，表示 flex: 0 1 auto，表示容器剩余空間有多余的時(shí)候不擴(kuò)展，不足的時(shí)候收縮，子項(xiàng)的寬度為自身寬度，適用于小控件元素的分布布局，或者某一項(xiàng)內(nèi)容動(dòng)態(tài)變化的布局。

參考資料

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