最近在學(xué)習(xí)Flex Box劫窒，其中的Flex Box屬性中的Flex Basis是關(guān)于項(xiàng)目寬度屬性設(shè)置的砾医，這讓許多初學(xué)Flex Box的人困惑它與CSS盒子模型Width屬性的區(qū)別在哪？Google了一番悟泵，找到一篇解釋寫(xiě)得很是不錯(cuò)的文章踩娘，嘗試著翻譯分享一下。
原文地址：http://gedd.ski/post/the-difference-between-width-and-flex-basis/

Flex Items的應(yīng)用準(zhǔn)則

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

• 如果沒(méi)有設(shè)置flex-basis屬性盖喷，那么flex-basis的大小就是項(xiàng)目的width屬性的大小
• 如果沒(méi)有設(shè)置width屬性，那么flex-basis的大小就是項(xiàng)目?jī)?nèi)容(content)的大小

下面通過(guò)給一個(gè)1000px的flex容器來(lái)添加一些flex items來(lái)說(shuō)明一下Flex Items的應(yīng)用準(zhǔn)則：

Container

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

設(shè)置寬度(Width)

添加四個(gè)200x200像素的items到flex容器中

container-items00

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

因?yàn)閒lex容器有足夠多的空間难咕，所以items可以很好的填充在容器內(nèi)部：

container-items01

上面的示例就是當(dāng)flex-basis沒(méi)有被指定课梳，默認(rèn)值是flex-basis: auto，也就意味著items以寬度width(200px)為準(zhǔn)余佃。

設(shè)置一個(gè)Flex Basis值

讓我們看看當(dāng)給這些已經(jīng)設(shè)置固定寬度width的items設(shè)置一個(gè)flex-basis值會(huì)發(fā)生什么暮刃。

container-items02

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

就像你說(shuō)看到的，當(dāng)指定一個(gè)flex-basis值的時(shí)候爆土，盒子的寬度屬性被忽略了椭懊，所以我們就不需要指定盒子的寬度width屬性了

item {
    flex-basis: 250px;
}

items完全填充了flex容器：

container-items03

因此items的寬度關(guān)鍵在用最終的flex-basis。最佳的方法是只使用flex-basis而不是width或height屬性步势。特別是Safari 10之前的版本的瀏覽器有一個(gè)flexbox bug氧猬，在給items應(yīng)用flex-shrink屬性的時(shí)候，瀏覽器會(huì)使用height屬性而不是flex-basis坏瘩。

使用max-width來(lái)限制flex-basis

min-width和max-width會(huì)限制flex-basis值盅抚。下面是給flex items設(shè)置max-width的結(jié)果：

container-items04

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

可以看到即使我們將flex-basis設(shè)置為250px，item的寬度還是被限制在了100px倔矾。所以在這個(gè)示例中最終的flex-basis是100px：

container-items05

接著試試min-width來(lái)看看最終的flex-basis有什么不同：

container-items06

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

可以看到最終item的寬度是250px而不是100px：

container-items07

Flex-basis到底是什么妄均？

現(xiàn)在我們知道了width屬性只是一個(gè)當(dāng)flex-basis沒(méi)有被設(shè)置時(shí)的回退選項(xiàng)。min-width和max-width則是flex-basis的下限和上限哪自。那么flex-basis到底是什么呢丰包？

也許你注意到了上面我們所有的示例在將flex items放入flex容器之前都直觀地列出了flex items的大小。之所以這么做是因?yàn)檫@就是flex-basis的含義：flex items 在被放進(jìn)一個(gè)flex容器之前的大小壤巷。也就是items理想或假設(shè)的大小邑彪。但是flex-basis不能保證其大小隙笆！一旦將items放入flex容器中锌蓄，flex-basis的值就無(wú)法保證了。在上面的示例中撑柔，你可以看到flex items完美地填充了容器瘸爽，那是因?yàn)槿萜鞯拇笮≌玫扔趇tems最終的flex-basis之和。但是如果容器沒(méi)有足夠的空間來(lái)容納或者有多余的空間呢铅忿？下面就分別講解一下這兩種情況：

當(dāng)沒(méi)有足夠空間的時(shí)候

比方說(shuō)我們想要放更多的flex-basis：200px的items到我們的容器：

container-items08

在items被放進(jìn)容器之前剪决，每個(gè)item會(huì)占據(jù)200px，所有的items會(huì)占據(jù)1600px。但是容器只有1000px柑潦。當(dāng)容器沒(méi)有足夠大的空間來(lái)存放所有的items的時(shí)候享言，flex items會(huì)按照壓縮率(shrink rate)被壓縮(shrink)其大小來(lái)填充容器,這個(gè)壓縮率就是flex-shrink來(lái)設(shè)置的，默認(rèn)情況下每個(gè)item的壓縮率都是一樣的：

container-items09

當(dāng)有額外的空間的時(shí)候

通常我們會(huì)有額外的空間剩余當(dāng)所有的items都添加進(jìn)容器后：

container-items10

item {
    flex-basis: 100px;
}

我們可以控制flex items的增長(zhǎng)來(lái)填充可用的空間渗鬼，這也就是flex-grow屬性的作用览露。默認(rèn)值為0，意味著item不會(huì)增長(zhǎng)譬胎。如果將每個(gè)item設(shè)置flex-grow： 1差牛，那么所有 的item都會(huì)等比例的增長(zhǎng)來(lái)填充剩余的空間：

container-items11

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

增長(zhǎng)和壓縮是flexbox中很重要的特性，也讓flexbox非常適合應(yīng)用于響應(yīng)式UI設(shè)計(jì)堰乔。Flexbox Zombies課程涵蓋了flex-shrink和flex-grow更多詳細(xì)的細(xì)節(jié)偏化。

Width vs flex-basis

希望現(xiàn)在你明白了width和flex-basis之間的區(qū)別，也知道了如何使用min-width和max-width來(lái)限制最終的flex-basis镐侯。以上這些設(shè)置同樣適用于height屬性侦讨，當(dāng)你將flex-direction設(shè)置為column或者column-reverse的時(shí)候。如果你想掌握所有的flexbox屬性苟翻，墻裂推薦免費(fèi)的Flexbox Zombies課程韵卤，通過(guò)玩游戲來(lái)學(xué)習(xí)flexbox！