深入了解flex布局的flex-grow、flex-shrink、flex-basis

flex-basis用來設定初始的寬度（或者高度），優先級高于width

flex-grow用來設定flex容器内 當還有剩餘寬度（或高度）時， 子元素的縮放比例。

同理 flex-shrink 用來設定flex容器内，當子元素的總寬度（或高度）超出父級容器寬度（或高度）時，子元素收縮的比例。​

-------------------------------

在使用 flex 布局的時候大家難以了解的是 flex-grow、flex-shrink、flex-basis 幾個屬性的用法，下面通過幾個例子來示範。

flex-basis

flex-basis 用于設定子項的占用空間。如果設定了值，則子項占用的空間為設定的值；如果沒設定或者為 auto，那子項的空間為width/height 的值。

• 對于子項1，flex-basis 如果設定預設是auto，子項占用的寬度使用width 的寬度，width沒設定也為 auto，是以子項占用空間由内容決定。
• 對于子項2，flex-basis 為auto，子項占用寬度使用width 的寬度，width 為70px，是以子項子項占用空間是70px。
• 對于子項3，flex-basis 為100px，覆寫width 的寬度，是以子項占用空間是100px。

​​JS Bin​js.jirengu.com

​​

flex-grow

用來“瓜分”父項的“剩餘空間”。

容器的寬度為400px, 子項1的占用的基礎空間(flex-basis)為50px，子項2占用的基礎空間是70px，子項3占用基礎空間是100px，剩餘空間為 400-50-70-100 = 180px。 其中子項1的flex-grow: 0(未設定預設為0)， 子項2flex-grow: 2，子項3flex-grow: 1，剩餘空間分成3份，子項2占2份(120px)，子項3占1份(60px)。是以 子項1真實的占用空間為: 50+0 = 50px， 子項2真實的占用空間為: 70+120 = 190px， 子項3真實的占用空間為: 100+60 = 160px。

flex-shrink

用來“吸收”超出的空間

容器的寬度為400px, 子項1的占用的基準空間(flex-basis)為250px，子項2占用的基準空間是150px，子項3占用基準空間是100px，總基準空間為 250+150+100=500px。容器放不下，多出來的空間需要被每個子項根據自己設定的flex-shrink 進行吸收。 子項1的flex-shrink: 1(未設定預設為1)， 子項2 flex-shrink: 2，子項3 flex-shrink: 2。子項1需要吸收的的空間為 ​

​(250*1)/(250*1+150*2+100*2) * 100 = 33.33px​

​，子項1真實的空間為 250-33.33 = 216.67px。同理子項2吸收的空間為​

​(150*2)/(250*1+150*2+100*2) * 100=40px​

​，子項2真實空間為 ​

​150-40 = 110px​

​。子項3吸收的空間為​

​(100*2)/(250*1+150*2+100*2) * 100 = 26.67px​

​，真實的空間為​

​100-26.67=73.33px​

​。