[譯] width 與 flex-basis 的區別

原文：The Difference Between Width and Flex Basis，from gedd.ski

攝影 | GoranH

這個問題不少人問起過我，實際上，當我對使用 Flexbox 還不太熟悉的時候，我谷歌過這個問題不少次。查看下個人谷歌搜索歷史，上一年我曾四次搜索相似「flex-basis vs width vs min-width」的問題。廢話少說！今天讓我來回答這個問題，但願你們之後不用再搜索了。

Flex 項目公式

這是須要記憶的一個公式：

content -> width -> flex-basis（受到 max|min-width 的制約）

在決定 Flex 項目的尺寸方面，記住很重要的一點，就是最終尺寸（final flex-basis）會受 min-width 和 max-width 屬性限制。

注意：Flexbox 規範稱之爲「假想的主軸尺寸」，可是把它當作最終尺寸更容易咱們理解。

若是未指定 flex-basis，flex-basis 將回退到 width 屬性。若是未指定 width 屬性，flex-basis 將回退到基於 Flex 項目內容的計算寬度值（computed width）。

爲了講清除這個公式，咱們使用 1000px 寬、包含一些 Flex 項目的 Flex 容器來講明：

container {
  display: flex;
  width: 1000px;
}
複製代碼

設置寬度

咱們將 Flex 項目設置爲 200px × 200px 的大小。

item {
  width: 200px;
  height: 200px;
}
複製代碼

如今，Flex 容器的尺寸足夠裝得下這些項目，咱們給放進去。

這個例子裏，咱們沒有爲 Flex 項目指定 flex-basis（也就是取默認的 flex-basis: auto），所以基礎尺寸會回退到 width（200px）。

此時，設置的 width 等同於設置 flex-basis。

設置 flex-basis

下面咱們再爲 Flex 項目指定 flex-basis，看看會產生什麼效果。

item {
  width: 30px;
  flex-basis: 250px;
}
複製代碼

能夠看見，指定了 flex-basis 後，width 屬性被忽略、再也不起做用（至關於沒有設置）。

item {
  flex-basis: 250px;
}
複製代碼

每一個項目的最終尺寸是 250px。由於容器空間仍是足夠，因此項目放在容器裏仍是沒問題的。

記住 Flex 項目的公式：

content -> width -> flex-basis（受到 max|min-width 的制約）

咱們關心的是最終尺寸。最佳實踐是使用 flex-basis 而非 width 或 height。特別是，Safari 瀏覽器上還有一個古老的 bug：在使用了 height 而非 flex-basis 屬性的 Flex 項目上 felx-shrink 屬性不會生效。

flex-basis 受限於 max-width

Flex 項目的最終尺寸會受到 min-width 和 max-width 屬性影響。咱們在 Flex 項目上設置 max-width 看一下：

item {
  flex-basis: 250px;
  max-width: 100px;
}
複製代碼

雖然 flex-basis 設置了 250px，可是卻達到了 100px 的 max-width 限制。所以最終尺寸是 100px，此時，Flex 項目仍是能很好的放在 Flex 容器中的：

如今咱們再設置 min-width 看下對最終尺寸的影響：

item {
  flex-basis: 100px;
  min-width: 250px;
}
複製代碼

雖然指定了 flex-basis: 100px，可是由於不能比 250px 的 min-wdith 更小。所以，最終尺寸是 250px，Flex 項目能正好裝在 Flex 容器中：

So，flex-basis 究竟是什麼？

如今咱們知道了在 flex-basis 未指定的狀況下，width 是它的回退方案，min-width 和 max-width 是限制了最終 尺寸的上限和下限。So，flex-basis 究竟是什麼？

在上圖裏，你也可能注意到了，放入 Flex 容器以前，咱們可視化了 Flex 項目的大小。之因此這樣作，就是爲了說明這就是 flex-basis：即 Flex 項目放入 Flex 容器以前的尺寸（譯者注：也就是項目的 max-content 大小）。這是 Flex 項目的理想或者說假想尺寸。可是爲 flex-basis 指定的值不能保證就是 Flex 項目的最終尺寸！一旦咱們將 Flex 項目放入 Flex 容器以後，事情就有改變了。上例中，Flex 容器的尺寸是剛恰好的，所以項目放在裏面都是 OK 的，由於全部項目的最終尺寸加起來正好是 Flex 容器的寬度（1000px）。這很好，但一般全部 Flex 項目的 felx-basis 相加以後，Flex 容器不是空間不足就是空間過剩，而不是像這樣剛恰好。

當空間不夠的時候

假設咱們像容器中放置了更多 flex-basis: 200px 的項目：

在放入容器以前，它們中的每個都佔據 200px 的尺寸，一共是 1600px。可是咱們的容器只有 1000px 寬。結果是，咱們沒有足夠的空間裝得下這麼多 Flex 項目，結果 Flex 項目默認會收縮以便適應不足的容器尺寸：

全部項目的起始寬度是 200px，由於空間不夠，因此 Flex 項目開始收縮以適應容器空間（變爲每一個 125px）。flex-shrink 用於控制收縮比例。能夠經過給 flex-shrink 指定一個更大或更小的值來控制收縮的程度，甚至能夠設置爲 0，表示不準收縮。

當有剩餘空間的時候

也有時候，當咱們把全部 Flex 項目的最終 flex-basis 加到一塊兒後，容器還有剩餘空間。

item {
  flex-basis: 100px;
}
複製代碼

咱們能夠指定咱們的 Flex 項目在放入 Flex 容器以後伸展，來佔據剩餘空間，這是經過 flex-grow 屬性控制的，此屬性默認爲 0，表示不會伸展。下例中，咱們爲每一個 Flex 項目都設置了 flex-grow: 1（以相同比例伸展）來佔據剩餘空間。

item {
  flex-basis: 100px;
  flex-grow: 1;
}
複製代碼

增加和收縮是 Flexbox 佈局的一大亮點，也是 Flexbox 在響應式 UI 設計方面如此出色的緣由。

width vs flex-basis

如今可以區分 width 和 flex-basis 了吧，min-width和 max-width 會限制最終的尺寸。而當 flex-direction 爲 column 或 column-reverse 的時候，那就是 flex-basis 跟 height 的關係了。

（完）