Flex Basis與Width的區別

最近在學習Flex Box，其中的Flex Box屬性中的Flex Basis是關於項目寬度屬性設置的，這讓許多初學Flex Box的人困惑它與CSS盒子模型Width屬性的區別在哪？Google了一番，找到一篇解釋寫得非常不錯的文章，嘗試着翻譯分享一下。
原文地址：http://gedd.ski/post/the-difference-between-width-and-flex-basis/

Flex Items的應用準則

content –> width –> flex-basis (limted by max|min-width)
也就是說，

• 若是沒有設置flex-basis屬性，那麼flex-basis的大小就是項目的width屬性的大小
• 若是沒有設置width屬性，那麼flex-basis的大小就是項目內容(content)的大小

下面經過給一個1000px的flex容器來添加一些flex items來講明一下Flex Items的應用準則：

 

Container

container { display: flex; width: 1000px; } 

設置寬度(Width)

添加四個200x200像素的items到flex容器中

 

container-items00

item { width: 200px; height: 200px; } 

由於flex容器有足夠多的空間，因此items能夠很好的填充在容器內部：

 

container-items01

上面的示例就是當flex-basis沒有被指定，默認值是flex-basis: auto，也就意味着items以寬度width(200px)爲準。

設置一個Flex Basis值

讓咱們看看當給這些已經設置固定寬度width的items設置一個flex-basis值會發生什麼。

 

container-items02

item { width: 30px; flex-basis: 250px; } 

就像你說看到的，當指定一個flex-basis值的時候，盒子的寬度屬性被忽略了，因此咱們就不須要指定盒子的寬度width屬性了

item { flex-basis: 250px; } 

items徹底填充了flex容器：

 

container-items03

所以items的寬度關鍵在用最終的flex-basis。最佳的方法是隻使用flex-basis而不是width或height屬性。特別是Safari 10以前的版本的瀏覽器有一個flexbox bug，在給items應用flex-shrink屬性的時候，瀏覽器會使用height屬性而不是flex-basis。

使用max-width來限制flex-basis

min-width和max-width會限制flex-basis值。下面是給flex items設置max-width的結果：

 

container-items04

item { flex-basis: 250px; max-width: 100px; } 

能夠看到即便咱們將flex-basis設置爲250px，item的寬度仍是被限制在了100px。因此在這個示例中最終的flex-basis是100px：

 

container-items05

接着試試min-width來看看最終的flex-basis有什麼不一樣：

 

container-items06

item { flex-basis: 100px; min-width: 250px; } 

能夠看到最終item的寬度是250px而不是100px：

 

container-items07

Flex-basis究竟是什麼？

如今咱們知道了width屬性只是一個當flex-basis沒有被設置時的回退選項。min-width和max-width則是flex-basis的下限和上限。那麼flex-basis究竟是什麼呢？

也許你注意到了上面咱們全部的示例在將flex items放入flex容器以前都直觀地列出了flex items的大小。之因此這麼作是由於這就是flex-basis的含義：flex items 在被放進一個flex容器以前的大小。也就是items理想或假設的大小。可是flex-basis不能保證其大小！一旦將items放入flex容器中，flex-basis的值就沒法保證了。在上面的示例中，你能夠看到flex items完美地填充了容器，那是由於容器的大小正好等於items最終的flex-basis之和。可是若是容器沒有足夠的空間來容納或者有多餘的空間呢？下面就分別講解一下這兩種狀況：

當沒有足夠空間的時候

比方說咱們想要放更多的flex-basis：200px的items到咱們的容器：

 

container-items08

在items被放進容器以前，每一個item會佔據200px，全部的items會佔據1600px。可是容器只有1000px。當容器沒有足夠大的空間來存放全部的items的時候，flex items會按照壓縮率(shrink rate)被壓縮(shrink)其大小來填充容器,這個壓縮率就是flex-shrink來設置的，默認狀況下每一個item的壓縮率都是同樣的：

 

container-items09

當有額外的空間的時候

一般咱們會有額外的空間剩餘當全部的items都添加進容器後：

 

container-items10

item { flex-basis: 100px; } 

咱們能夠控制flex items的增加來填充可用的空間，這也就是flex-grow屬性的做用。默認值爲0，意味着item不會增加。若是將每一個item設置flex-grow： 1，那麼全部 的item都會等比例的增加來填充剩餘的空間：

 

container-items11

item { flex-basis: 100px; flex-grow: 1; } 

增加和壓縮是flexbox中很重要的特性，也讓flexbox很是適合應用於響應式UI設計。Flexbox Zombies課程涵蓋了flex-shrink和flex-grow更多詳細的細節。

Width vs flex-basis

但願如今你明白了width和flex-basis之間的區別，也知道了如何使用min-width和max-width來限制最終的flex-basis。以上這些設置一樣適用於height屬性，當你將flex-direction設置爲column或者column-reverse的時候。若是你想掌握全部的flexbox屬性，牆裂推薦免費的Flexbox Zombies課程，經過玩遊戲來學習flexbox！