最近在學習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！

?

轉載于:https://www.cnblogs.com/thinkingthigh/p/10033809.html

總結

以上是生活随笔為你收集整理的Flex Basis与Width的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。