最近在學習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 {
display: flex;
width: 1000px;
}
設置寬度(Width)
添加四個200x200像素的items到flex容器中
item {
width: 200px;
height: 200px;
}
因為flex容器有足夠多的空間，所以items可以很好的填充在容器內部：
上面的示例就是當flex-basis沒有被指定，默認值是flex-basis: auto，也就意味著items以寬度width(200px)為準。
設置一個Flex Basis值
讓我們看看當給這些已經設置固定寬度width的items設置一個flex-basis值會發生什么。
item {
width: 30px;
flex-basis: 250px;
}
就像你說看到的，當指定一個flex-basis值的時候，盒子的寬度屬性被忽略了，所以我們就不需要指定盒子的寬度width屬性了
item {
flex-basis: 250px;
}
items完全填充了flex容器：
因此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的結果：
item {
flex-basis: 250px;
max-width: 100px;
}
可以看到即使我們將flex-basis設置為250px，item的寬度還是被限制在了100px。所以在這個示例中最終的flex-basis是100px：
接著試試min-width來看看最終的flex-basis有什么不同：
item {
flex-basis: 100px;
min-width: 250px;
}
可以看到最終item的寬度是250px而不是100px：
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到我們的容器：
在items被放進容器之前，每個item會占據200px，所有的items會占據1600px。但是容器只有1000px。當容器沒有足夠大的空間來存放所有的items的時候，flex items會按照壓縮率(shrink rate)被壓縮(shrink)其大小來填充容器,這個壓縮率就是flex-shrink來設置的，默認情況下每個item的壓縮率都是一樣的：
當有額外的空間的時候
通常我們會有額外的空間剩余當所有的items都添加進容器后：
item {
flex-basis: 100px;
}
我們可以控制flex items的增長來填充可用的空間，這也就是flex-grow屬性的作用。默認值為0，意味著item不會增長。如果將每個item設置flex-grow： 1，那么所有 的item都會等比例的增長來填充剩余的空間：
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！
