有 width 不就夠了嗎，爲何還要 flex-basis 呢？

Flex 佈局中，咱們知道 flex-basis 屬性是用來設置 Flex 項目的初始主軸尺寸（initial main size）的。

同樣的效果

但經過實踐發現，在 Flex 項目上使用 flex-basis 和 width 屬性時，獲得的效果是同樣的。

如下面的結構爲例：

<div style="display: flex;">
	<div class="item">Item 1</div>
	<div class="item">Item 2 的內容有點多</div>
	<div class="item">Item 3</div>
</div>
複製代碼

1. 等寬列：在 .item 設置 flex-basis: 0 或者 width: 0 都能獲得這個效果。

.item {  flex-basis:0; /* 與設置 width: 0 的效果同樣 */ flex-grow: 1;}
複製代碼

2. 兩邊固定寬，中間佔據剩餘空間。

.item:first-child, .item:last-child { flex-basis: 100px; /* 與設置 width: 100px 的效果同樣 */ }
.item:nth-child(2) { flex-grow: 1;}
複製代碼

經過觀察可以發現：兩種佈局方式下，無論在 Flex 項目上使用 flex-basis 仍是 width，獲得的效果都是同樣的。

區別何在？

事實也是這樣子，問題來了：有 width 不就夠了嗎？爲何還要多設計一個 flex-basis 屬性呢？

其實，仍是有區別的：

注意：爲了方便描述，假設當前文檔是按照從左到右，從上到下的方式排版的，即處在水平書寫模式（horizontal writing modes）下。

• 主軸尺寸：首先要明確的是，flex-basis 設置的是 Flex 項目的主軸尺寸，當 flex-direction 取值 column 或 column-reverse 時，flex-basis 表示的就不是 width，而是 height 了。
• 支持簡寫：經過 flex 簡寫屬性，咱們能夠同時設置 flex-grow、flex-shrink、flex-basis 這三個屬性，若是使用 width，就不得不分開設置了。
• 使用範圍：flex-basis 只會在 Flex 項目上生效，對定位了的 Flex 項目還不起做用。
• 優先級別：當在 Flex 項目上同時設置 flex-basis 和 width/height 時，生效的會是 flex-basis。

auto 和 content

flex-basis 的默認值是 auto，與另外一個可取值 content 的差異微乎其微。

當 flex-basis: auto 時，會查看當前 Flex 項目是否設置 width/height 屬性。沒有設置的話，就會回退到 flex-basis: content。

flex-basis: content 的意思是 automatic sizing，意思 Flex 項目的尺寸根據當前可用空間發生變化的，不超過 max-width/height，不小於 min``-width/height。

即 flex-basis: content 的效果等於 flex-basis: auto; width/height: auto;，在我看來，整數型值沒有任何實際意義，挺雞肋的。

總結一下

• 在水平書寫模式下，flex-basis 解析效果與 width 徹底相同（前提是 flex-basis 的值不是 auto 或 content）。
• flex-basis 只對（非絕對定位的）Flex 項目 生效
• flex-basis 設置的是 主軸尺寸，根據 flex-direction 的取值不一樣，可能表示 width，也可能表示 height
• flex-basis **支持簡寫屬性 **flex** **
• flex-basis 與 width/height 同時使用時，優先級更高。

參考連接

• flex-basis，MDN
• Flex Basis Property in Flexbox
• What are the differences between flex-basis and width?

（正文完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）