到目前為止，Flexbox佈局應該是目前最流行的佈局方式之一了。而Flexbox佈局的最大特性就是讓Flex專案可伸縮，也就是讓Flex專案的寬度和高度可以自動填充Flex容器剩餘的空間或者縮小Flex專案適配Flex容器不足的寬度。而這一切都是依賴於Flexbox屬性中的flex屬性來完成。一個Flex容器會等比的按照各Flex專案的擴充套件比率分配Flex容器剩餘空間，也會按照收縮比率來縮小各Flex專案，以免Flex專案溢位Flex容器。但其中Flex專案又是如何計算呢？他和擴充套件比率或收縮比率之間又存在什麼關係呢？在這篇文章中我們將一起來探來。

在Flexbox佈局中，容器中顯示式使用display

設定為flex或inline-flex，那麼該容器就是Flex容器，而該容器的所有子元素就是Flex專案。

簡介

在這篇文章中，我們將要聊的是有關於flex屬性的事情，特別是如何使用該屬性來計算Flex專案？在開始之前，先來簡單的瞭解一下flex屬性。

在Flexbox中，flex屬性是flex-grow（擴充套件比率）、flex-shrink（收縮比率）和flex-basis（伸縮基準）三個屬性的簡稱。這三個屬性可以控制一個Flex專案（也有人稱為Flex元素），主要表現在以下幾個方面：

• flex-grow：Flex專案的擴充套件比率，讓Flex專案得到（伸張）多少Flex容器多餘的空間（Positive free space）
• flex-shrink：Flex專案收縮比率，讓Flex專案減去Flex容器不足的空間（Negative free space）
• flex-basis：Flex專案未擴充套件或收縮之前，它的大小是多少

在Flexbox佈局中，只有充分理解了這三個屬性才能徹底的掌握Flex專案是如何擴充套件和收縮的，也才能更徹底的掌握Flexbox佈局。因此掌握這三個屬性，以及他們之間的計算關係才是掌握Flexbox佈局的關鍵所在。

相關概念

在具體介紹flex相關的技術之前，先對幾個概念進行描述，因為理解了這幾個概念更有易於大家對後面知識的理解。

主軸長度和主軸長度屬性

Flex專案在主軸方向的寬度或高度就是Flex專案的主軸長度，Flex專案的主軸長度屬性是width

剩餘空間和不足空間

在Flexbox佈局中，Flex容器中包含一個或多個Flex專案（該容器的子元素或子節點）。Flex容器和Flex專案都有其自身的尺寸大小，那麼就會有：Flex專案尺寸大小之和大於或小於Flex容器 情景：

• 當所有Flex專案尺寸大小之和小於Flex容器時，Flex容器就會有多餘的空間沒有被填充，那麼這個空間就被稱為Flex容器的剩餘空間（Positive Free Space）
• 當所有Flex專案尺寸大小之和大於Flex容器時，Flex容器就沒有足夠的空間容納所有Flex專案，那麼多出來的這個空間就被稱為負空間（Negative Free Space）

舉個例子向大家闡述這兩個情形：“假設我們有一個容器（Flex容器），顯式的給其設定了width為800px，padding為10px，並且box-sizing設定為border-box”。根據CSS的盒模型原理，我們可以知道Flex容器的內寬度（Content盒子的寬度）為800px - 10px * 2 = 780px：

假設Flex容器中包含了四個Flex專案，而且每個Flex專案的width都為100px，那麼所有Flex專案的寬度總和則是100px * 4 = 400px（Flex專案沒有設定其他任何有關於盒模型的尺寸），那麼Flex容器將會有剩餘的空間出來，即780px - 400px = 380px。這個380px就是我們所說的Flex容器的剩餘空間：

假設把Flex專案的width從100px調到300px，那麼所有Flex專案的寬度總和就變成了300px * 4 = 1200px。這個時候Flex專案就溢位了Flex容器，這個溢位的寬度，即1200px - 780px = 420px。這個420px就是我們所說的Flex容器的不足空間：

上面演示的是主軸在x軸方向，如果主軸變成y軸的方向，同樣存在上述兩種情形，只不過把width變成了height。接下來的內容中，如果沒有特殊說明，那麼所看到的示例都僅演示主軸在x軸的方向，即flex-direction為row！

min-content 和 max-content

min-content和max-content是CSS中的一個新概念，隸屬於CSS Intrinsic and Extrinsic Sizing Specification模組。簡單的可以這麼理解。

CSS可以給任何一個元素顯式的通過width屬性指定元素內容區域的寬度，內容區域在元素padding、border和margin裡面。該屬性也是CSS盒模型眾多屬性之一。

記住，CSS的box-sizing可以決定width的計算方式。

如果我們顯式設定width為關鍵詞auto時，元素的width將會根據元素自身的內容來決定寬度。而其中的min-content和max-content也會根據元素的內容來決定寬度，只不過和auto有較大的差異

• min-content： 元素固有的最小寬度
• max-content： 元素固有的首選寬度

比如下面這個示例：

如果內容是英文的話，min-content的寬度將取決於內容中最長的單詞寬度，中文就有點怪異（其中之因目前並未深究），而max-content則會計算內容排整行的寬度，有點類似於加上了white-space:nowrap一樣。

上例僅展示了min-content和max-content最基本的渲染效果（Chrome瀏覽器渲染行為）。這裡不做深入的探討論，畢竟不是本文的重點，如果感興趣，歡迎關注後續的相關更新，或者先閱讀@張鑫旭 老師寫的一篇文章《理解CSS3 max/min-content及fit-content等width值》

回到我們自己的主題上來。

前面在介紹Flex剩餘空間和不足空間的時候，我們可以得知，出現這兩種現象取決於Flex容器和Flex專案的尺寸大小。而flex屬性可以根據Flex容器的剩餘空間（或不足空間）對Flex專案進行擴充套件（或收縮）。那麼為了計算出有多少Flex容器的剩餘空間能用於Flex專案上，客戶端（瀏覽器）就必須知道Flex專案的尺寸大小。要是沒有顯式的設定元素的width屬性，那麼問題就來了，瀏覽器它是如何解決沒有應用於絕對單位的寬度（或高度）的Flex專案，即如何計算？

這裡所說的min-content和max-content兩個屬性值對於我們深入的探討flex屬性中的flex-grow和 flex-grow屬性有一定的影響。所以提前向大家簡單的闡述一正是這兩個屬性值在瀏覽器中的渲染行為。

簡單的總結一下：min-content的大小，從本質上講，是由字串中最長的單詞決定了大小；max-content則和min-content想反. 它會變得儘可能大, 沒有自動換行的機會。如果Flex容器太窄， 它就會溢位其自身的盒子!

Flex專案的計算

在Flexbox佈局當中，其中 flex-grow、flex-shrink和flex-basis都將會影響Flex專案的計算。接下來我們通過一些簡單的示例來闡述這方面的知識。

flex-basis

flex-basis屬性在任何空間分配發生之前初始化Flex專案的尺寸。其預設值為auto。如果flex-basis的值設定為auto，瀏覽器將先檢查Flex專案的主尺寸是否設定了絕對值再計算出Flex專案的初始值。比如說，你給Flex專案設定的width為200px，那麼200px就是Flex專案的flex-basis值。

如果你的Flex專案可以自動調整大小，則auto會解析為其內容的大小，這個時候，min-content和max-content變會起作用。此時將會把Flex專案的max-content作為 flex-basise的值。比如，下面這樣的一個簡單示例：

flex-grow和flex-shrink的值都為0，第一個Flex專案的width為150px，相當於flex-basis的值為150px，而另外兩個Flex專案在沒有設定寬度的情況之下，其寬度由內容的寬度來設定。

如果flex-basis的值設定為關鍵詞content，會導致Flex專案根據其內容大小來設定Flex專案，叧怕是Flex專案顯式的設定了width的值。到目前為止，content還未得到瀏覽器很好的支援。

flex-basis除了可以設定auto、content、fill、max-content、min-content和fit-content關鍵詞之外，還可以設定<length>值。如果<length>值是一個百分比值，那麼Flex專案的大小將會根據Flex容器的width進行計算。比如下面這個示例：

Flex容器顯式設定了width（和box-sizing取值有關係，上圖為border-box的示例結果），那麼flex-basis會根據Flex容器的width計算出來，如果Flex容器未顯示設定width值，則計算出來的結果將是未定義的（會自動根據Flex容器的寬度進行計算）。

在Flexbox佈局中，如果你想完全忽略Flex專案的尺寸，則可以將flex-basis設定為0。這樣的設定，基本上是告訴了瀏覽器，Flex容器所有空間都可以按照相關的比例進行分配。

來看一個簡單的示例，Flex專案未顯式設定width情況之下，flex-basis不同取值的渲染效果。

到寫這篇文章為止，使用Firefox瀏覽器檢視效果更佳。

當Flex專案顯式的設定了min-width或max-width的值時，就算Flex專案顯式的設定了flex-basis的值，也會按min-width和max-width設定Flex專案寬度。當計算的值大於max-width時，則按max-width設定Flex專案寬度；當計算的值小於min-width時，則按min-width設定Flex專案寬度：

有關於flex-basis屬性相關的運用簡單的小結一下：

• flex-basis預設值為auto
• 如果Flex專案顯式的設定了width值，同時flex-basis為auto時，則Flex專案的寬度為按width來計算，如果未顯式設定width，則按Flex專案的內容寬度來計算
• 如果Flex專案顯式的設定了width值，同時顯式設定了flex-basis的具體值，則Flex專案會忽略width值，會按flex-basis來計算Flex專案
• 當Flex容器剩餘空間不足時，Flex專案的實際寬度並不會按flex-basis來計算，會根據flex-grow和flex-shrink設定的值給Flex專案分配相應的空間
• 對於Flexbox佈局中，不建議顯式的設定Flex專案的width值，而是通過flex-basis來控制Flex專案的寬度，這樣更具彈性
• 如果Flex專案顯式的設定了min-width或max-width值時，當flex-basis計算出來的值小於min-width則按min-width值設定Flex專案寬度，反之，計算出來的值大於max-width值時，則按max-width的值設定Flex專案寬度

flex-grow

前面提到過，flex-grow是一個擴充套件因子（擴充套件比例）。其意思是，當Flex容器有一定的剩餘空間時，flex-grow可以讓Flex專案分配Flex容器剩餘的空間，每個Flex專案將根據flex-grow因子擴充套件，從而讓Flex專案佈滿整個Flex容器（有效利用Flex容器的剩餘空間）。

flex-grow的預設值是0，其接受的值是一個數值，也可以是一個小數值，但不支援負值。一旦flex-grow的值是一個大於0的值時，Flex專案就會佔用Flex容器的剩餘空間。在使用flex-grow時可以按下面的方式使用：

• 所有Flex專案設定相同的flex-grow值
• 每個Flex專案設定不同的flex-grow值

不同的設定得到的效果將會不一樣，但flex-grow的值始終總量為1，即Flex專案佔有的量之和（分子）和分母相同。我們來具體看看flex-grow對Flex專案的影響。

當所有的Flex專案具有一個相同的flex-grow值時，那麼Flex專案將會平均分配Flex容器剩餘的空間。在這種情況之下將flex-grow的值設定為1。比如下面這個示例，Flex容器（width: 800px，padding: 10px）中有四個子元素（Flex專案），顯式的設定了flex-basis為150px，根據前面介紹的內容，我們可以知道每個Flex專案的寬度是150px，這樣一來，所有Flex專案寬度總和為150px * 4 = 600px。容器的剩餘空間為780px - 600px = 180px。當顯式的給所有Flex專案設定了flex-grow為1（具有相同的值）。這樣一來，其告訴瀏覽器，把Flex容器剩餘的寬度（180px）平均分成了四份，即：180px / 4 = 45px。而flex-grow的特性就是按比例把Flex容器剩餘空間分配給Flex專案（當然要設定了該值的Flex專案），就該例而言，就是給每個Flex專案添加了45px，也就是說，此時Flex專案的寬度從150px擴充套件到了195px（150px + 45px = 195px）。如下圖所示：

特別宣告，如果Flex專案均分Flex容器剩餘的空間，只要給Flex專案設定相同的flex-grow值，大於1即可。比如把flex-grow設定為10，就上例而言，把剩餘空間分成了40份，每個Flex專案佔10份。其最終的效果和設定為1是等效的。

上面我們看到的均分Flex容器剩餘空間，事實上我們也可以給不同的Flex專案設定不同的flex-grow值，這樣一來就會讓每個Flex專案根據自己所佔的比例來佔用Flex容器剩餘的空間。比如上面的示例，把Flex專案的flex-grow分別設定為1:2:3:4。也就是說把Flex容器的剩餘空間分成了10份（1 + 2 + 3 + 4 = 10），而每個Flex專案分別佔用Flex容器剩餘空間的1/10、2/10、3/10和4/10。就上例而言，Flex容器剩餘空間是180px，按這樣的計算可以得知，每一份的長度是180px / 10 = 18px，如此一來，每個Flex專案的寬度則變成：

• Flex1: 150px + 18px * 1 = 168px
• Flex2: 150px + 18px * 2 = 186px
• Flex3: 150px + 18px * 3 = 204px
• Flex4: 150px + 18px * 4 = 222px

最終效果如下圖所示：

前面兩個示例向大家演示了，Flex專案均分和非均分Flex容器剩餘的空間。從示例中可以看出來，flex-grow的值都是大於或等於1的數值。事實上，flex-grow還可以設定小數。比如，給所有Flex專案設定flex-grow的值為0.2。由於Flex專案的flex-grow的值都相等，所以擴充套件的值也是一樣的，唯一不同的是，所有的Flex專案並沒有把Flex容器剩餘空間全部分完。就我們這個示例而言，四個Flex專案的flex-grow加起來的值是0.8，小於1。換句話說，四個Flex專案只分配了Flex容器剩餘空度的80%，按上例的資料來計算，即是180px * .8 = 144px（只分去了144px），而且每個Flex專案分得都是36px（144px / 4 = 36px 或者 144px * 0.2 / 0.8 = 36px）。最終效果如下圖所示：

上面的示例中，flex-basis都顯式的設定了值。事實上，flex-grow和flex-basis會相互影響的。這也令我們的Flex專案計算變得複雜化了。比如說，flex-basis的值為auto，而且沒有給Flex專案顯式的設定width。根據前面的內容我們可以得知，此時Flex專案的大小都取決於其內容的max-content大小。此時Flex容器的剩餘的空間將由瀏覽器根據Flex專案的內容寬度來計算。比如接下來的這個示例，四個Flex專案都是由其內容max-content大小決定。同時將flex-grow都設定為1（均勻分配Flex容器剩餘空間）。具體的資料由下圖所示（Chrome瀏覽器計算得出的值）：

特別注意，不同瀏覽器對小數位的計算略有差異，上圖是在Chrome瀏覽器下得出的值。所以最終加起來的值略大於Flex容器的寬度708px。

針對這樣的使用場景，如果你想讓所有Flex專案具有相同的尺寸，那麼可以顯式的設定Flex專案的flex-basis值為0（flex: 1 1 0）。從flex-basis一節中可以得知，當flex-basis值為0時，表示所有空間都可以用來分配，而且flex-grow具有相同的值，因此Flex專案可以獲取均勻的空間。如此一來Flex專案寬度將會相同。

flex-basis還可以由其他值為設定Flex專案的寬度，這裡不再一一演示。感興趣的同學可以自己根據flex-basis的取值寫測試用例。換句話說，如果你理解了前面介紹的flex-basis內容，就能更好的理解flex-grow和flex-basis相結合對Flex專案分配Flex容器剩餘空間的計算。也將不會再感到困惑。

flex-shrink

flex-shrink和flex-grow類似，只不過flex-shrink是用來控制Flex專案縮放因子。當所有Flex專案寬度之和大於Flex容器時，將會溢位容器（flex-wrap為nowrap時），flex-shrink就可以根據Flex專案設定的數值比例來分配Flex容器的不足空間，也就是按比例因子縮小自身的寬度，以免溢位Flex容器。

flex-shrink接收一個<number>值，其預設值為1。也就是說，只要容器寬度不足夠容納所有Flex專案時，所有Flex專案預設都會收縮。如果你不想讓Flex專案進行收縮時，可以設定其值為0，此時Flex專案始終會保持原始的fit-content寬度。同樣的，flex-shrink也不接受一個負值做為屬性值。

基於上面的示例，簡單的調整一下引數，所有Flex專案都設定了flex: 0 0 300px，可以看到Flex專案溢位了Flex容器：

在這個示例中，由於flex-shrink顯式的設定了值為0，Flex專案不會進行收縮。如果你想讓Flex專案進行收縮，那麼可以把flex-shrink設定為1。

從上圖的結果我們可以看出，當所有Flex專案的flex-shrink都設定為相同的值，比如1，將會均分Flex容器不足空間。比如此例，所有Flex專案的寬度總和是1200px（flex-basis: 300px），而Flex容器寬度是780px（width: 800px，padding: 10px，盒模型是border-box），可以算出Flex容器不足空間為420px（1200 - 780 = 420px），因為所有Flex專案的flex-shrink為1，其告訴瀏覽器，將Flex容器不足空間均分成四份，那麼每份則是105px（420 / 4 = 105px），這個時候Flex專案就會自動縮放105px，其寬度就由當初的300px變成了195px（300 - 105 = 195px）。

這個示例演示的是Flex專案設定的值都是相同的值，其最終結果是將會均分Flex容器不足空間。其實flex-shrink也可以像flex-grow一樣，為不同的Flex專案設定不同的比例因子。比如1:2:3:4，這個時候Flex專案就不會均分了，而是按自己的比例進行收縮，比例因子越大，收縮的將越多。如下圖所示：

就上圖而言，所有Flex專案的flex-shrink之和為10（1 + 2 + 3 + 4 = 10），此時把Flex容器不足空間420px分成了十份，每一份42px（420 / 10 = 42px），每個Flex專案按照自己的收縮因子相應的去收縮對應的寬度，此時每個Flex專案的寬度就變成：

• Flex1: 300 - 42 * 1 = 258px
• Flex2: 300 - 42 * 2 = 216px
• Flex3: 300 - 42 * 3 = 174px
• Flex4: 300 - 42 * 4 = 132px

按照該原理來計算的話，當某個Flex專案的收縮因子設定較大時，就有可能會出現小於0的現象。基於上例，如果把第四個Flex專案的flex-shrink設定為15。這樣一來，四個Flex專案的收縮因子就變成：1:2:3:15。也就是說把Flex容器不足空間分成了21份，每份佔據的寬度是20px（420 / 21 = 20px）。那麼Flex專案的寬度就會出現0的現象（300 - 15 * 20 = 0）。這個時候會不會出現無空間容納Flex專案的內容呢？事實上並不會這樣：

在Flexbox佈局當中，會阻止Flex專案元素寬度縮小至0。此時Flex專案會以min-content的大小進行計算，這個大小是它們利用任何可以利用的自動斷行機會後所變成的

如果某個Flex專案按照收縮因子計算得出寬度趨近於0時，Flex專案將會按照該元素的min-content的大小來設定寬度，同時這個寬度將會轉嫁到其他的Flex專案，再按相應的收縮因子進行收縮。比如上例，Flex專案四，其flex-shrink為15，但其寬度最終是以min-content來計算（在該例中，Chrome瀏覽器渲染的寬度大約是22.09px）。而這個22.09px最終按照1:2:3的比例分配給了Flex專案一至三（Flex1,Flex2和Flex3）。對應的Flex專案寬度就變成：

• Flex1: 300 - 20 * 1 - 22.09 / 6 * 1 = 276.334px
• Flex2: 300 - 20 * 2 - 22.09 / 6 * 2 = 252.636px
• Flex3: 300 - 20 * 3 - 22.09 / 6 * 3 = 228.955px
• Flex4: min-content，在該例中大約是22.09px

對於該情形，計算相對而言就更為複雜一些了。但瀏覽器會很聰明的幫你處理這些場景，會傾向於給你合理的結果。只不過大家需要知道這樣的一個細節，碰到類似的場景才不會一臉蒙逼（^_^）。

flex-grow可以設定一個小於0的值，同樣的，flex-shrink也可以設定一個小於0的值，比如我們給所有的Flex專案設定flex-shrink的值為0.2，你將看到的結果如下：

從結果的示例圖中我們可以看出來，當所有Flex專案的收縮因子（flex-shrink）總和小於1時，Flex容器不足空間不會完全分配完，依舊會溢位Flex容器。好比該例，flex-shrink的總和是.8，分配了Flex容器剩餘空間420px的80%，即336px（還有84px剩餘空間未完全分配完），由於每個Flex專案的收縮因子是相同的，好比前面的示例，都設定了1類似，把分配的空間336px均分為四份，也就是84px，因此每個Flex專案的寬度由當初的300px變成了216px（300 - 84 = 216px）。這個其實和flex-grow類似，只不過flex-shrink只是收縮而以。

Flex專案計算公式

Flex專案伸縮計算是一個較為複雜的過程，但它們之間還是有據可查。@Chris和@Otree對該方面就有深入的研究。他們給Flex專案的計算總結出了一套計算公式，具體公式如下：

@Chris還依據這套公式寫了一個JavaScript的案例，來模擬Flex專案計算。

flex常見的值

大部分情形之下，我們都是使用flex屬性來設定Flex專案的伸縮的值。其常見值的效果有：

• flex: 0 auto和flex:initial，這兩個值與flex: 0 1 auto相同，也是初始值。會根據width屬性決定Flex專案的尺寸。當Flex容器有剩餘空間時，Flex專案無法擴充套件；當Flex容器有不足空間時，Flex專案收縮到其最小值min-content。
• flex: auto與flex: 1 1 auto相同。Flex專案會根據width來決定大小，但是完全可以擴充套件Flex容器剩餘的空間。如果所有Flex專案均為flex: auto、flex:initial或flex: none，則Flex專案尺寸決定後，Flex容器剩餘空間會被平均分給是flex:a uto的Flex專案。
• flex: none與flex: 0 0 auto相同。Flex專案根據width決定大小，但是完全不可伸縮，其效果和initial類似，這種情況下，即使在Flex容器空間不夠而溢位的情況之下，Flex專案也不會收縮。
• flex: <positive-number>（正數）與flex: 1 0px相同。該值使Flex專案可伸縮，並將flex-basis值設定為0，導致Flex專案會根據設定的比例因子來計算Flex容器的剩餘空間。如果所有Flex專案都使用該模式，則它們的尺寸會正比於指定的伸縮比。

預設狀態下，伸縮專案不會收縮至比其最小內容尺寸（最長的英文詞或是固定尺寸元素的長度）更小。可以靠設定min-width屬性來改變這個預設狀態。

如何掌握Flex專案的大小

通過前面的內容介紹，應該可以瞭解到Flex專案的大小計算是非常的複雜。如果要真正的理解Flex專案是如何工作的話，最為關鍵的是理解有多少東西參與影響Flex專案。我們可以按下面這樣的方式來進行思考。

怎麼設定Flex專案的基本大小

在CSS中設定一個元素的基本大小可以通過width來設定，或者通過min-width或max-width來設定元素的最小或最大寬度，在未來我們還可以通過content、min-content、max-content或fit-content等關鍵詞來設定元素的大小。對於Flex專案，我們還可以通過flex-basis設定Flex專案大小。對於如何設定Flex專案的基本大小，我們可以圍繞以下幾點來進行思考：

• flex-basis的值是auto？Flex專案顯式的設定了寬度嗎？如果設定了，Flex專案的大小將會基於設定的寬度
• flex-basis的值是auto還是content？如果是auto，Flex專案的大小為原始大小
• flex-basis的值是0的長度單位嗎？如果是這樣那這就是Flex專案的大小
• flex-basis的值是0呢? 如果是這樣，則Flex專案的大小不在Flex容器空間分配計算的考慮之內

更為具體的可以參閱flex-basis相關的介紹。

我們有可用空間嗎？

如果Flex容器沒有剩餘空間，Flex專案就不會擴充套件；如果Flex容器沒有不足空間，Flex專案就不會收縮：

• 所有的Flex專案的寬度總和是否小於Flex容器的總寬度？ 如果是這樣，那麼Flex容器有剩餘空間，flex-grow會發揮作用， 具體如何發揮作用，可以參閱flex-grow相關的介紹
• 所有的Flex專案的寬度總和是否大於Flex容器的總寬度？ 如果是這樣，那麼Flex容器有不足空間，flex-shrink會發揮作用，具體如何發揮作用，可以參閱flex-shrink相關的介紹

分配空間的其他方式

如果我們不想把Flex容器的剩餘空間擴充套件到Flex專案中，我們可以使用Flexbox中其他屬性，比如justify-content屬性來分配剩餘空間。當然也可以給Flex專案設定margin值為處理Flex容器剩餘空間。不過這一部分沒有在這裡闡述，如果感興趣的話，不仿閱讀一下Flexbox相關的介紹。

總結

很久以為，一直以為Flexbox佈局中，Flex專案都會根據Flex容器自動計算。而事實上呢？正如文章中介紹的一樣，Flex專案的計算是相當的複雜。設定Flex專案大小的值以及flex-basis、flex-grow和flex-shrink的設定都會對其有較大的影響，而且它們的組合場景也是非常的多，並且不同的場景會造成不一樣的結果。

當然，文章中所介紹的內容或許沒有覆蓋到所有的場景，但這些基本的演示或許能幫助大家更好的理解Flex專案是如何計算的。最後希望該文對大家有所幫助，如果你有更深的瞭解歡迎在下面的評論中與我一起分享。如果文章中有不對之處，還望各路大嬸拍正。

原文連結
本文為雲棲社群原創內容，未經允許不得轉載。