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

到目前爲止，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或height屬性，具體是哪個屬性，將會由主軸方向決定。

剩餘空間和不足空間

在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的設置都會對其有較大的影響，並且它們的組合場景也是很是的多，而且不一樣的場景會形成不同的結果。

原文連接