到目前為止，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項目是如何計算的。最後希望該文對大家有所幫助，如果你有更深的了解歡迎在下面的評論中與我一起分享。如果文章中有不對之處，還望各路大嬸拍正。

原文鏈接
本文為雲棲社區原創內容，未經允許不得轉載。

聊聊Flexbox布局中的flex的演算法