布局的傳統(tǒng)解決方案基于 盒模型 辕棚，依賴 display + position + float 邓厕，flex 為布局帶來了新的時代，我們再也不用局限于 float 和 position 详恼，特別是在移動端，我們可以利用 flex 輕松實現(xiàn)以往 float 和 psition 很難實現(xiàn)的布局挽铁。 本文主要講解flex的三個子屬性：flex-grow敞掘、flex-basis叽掘、flex-shrink
如果你對 flex 還沒有接觸過玖雁，或者概念模糊，推薦阮老師的 flex 布局教程
flex 布局發(fā)生在父容器和子容器之間
采用 flex 布局的元素浓镜，稱為 flex 容器（flex container）劲厌。它的所有子元素自動成為容器成員。成員根據(jù) flex 的規(guī)則瓜分容器的剩余空間脊僚。
什么是剩余空間遵绰？
具備 flex 環(huán)境的父容器增淹，通常是有一條水平的主軸和一條垂直的交叉軸。剩余空間就是父容器在主軸的方向上還有多少可用的空間虑润。比如看下面這段html結(jié)構(gòu)：
<style>
.container {
width: 500px;
display: flex;
display: -webkit-flex;
}
</style>
<div class="container">
<span class="B1"></span>
<span class="B2"></span>
<span class="B3"></span>
</div>
container 就是父容器，B1 B2 B3 就是子容器哭当。剩余空間就是：500px - B1.width - B2.width - B3.width冗澈。嗯就是這么簡單！
flex-grow
知道了剩余空間的概念亚亲，首先來看一下 flex-grow。上面那個例子肛响，現(xiàn)在我們再假設(shè) B1、B2特笋、B3 的 width 是100px巾兆，那么剩余空間就是 500-100*3=200px。 知道了剩余空間有什么用呢臼寄？這個時候 flex-grow 就該出場了，假如我們這個時候?qū)?B1 設(shè)置 flex-grow: 1;质帅，那么我們會發(fā)現(xiàn)留攒，B1 把 B2 和 B3 都擠到右邊了煤惩，也就是說剩余的200px空間都被 B1 占據(jù)了炼邀，所以此時 B1 的 width 比實際設(shè)置的值要大。
所以這里 flex-grow 的意思已經(jīng)很明顯了洛退，就是索取父容器的剩余空間，默認(rèn)值是0兵怯，就是三個子容器都不索取剩余空間。
但是當(dāng) B1 設(shè)置了 flex-grow: 1; 的時候驼仪，剩余空間就會被分成一份，然后都給了 B1袜漩。 如果此時B2設(shè)置了 flex-grow: 2;，那么說明 B2 也參與到瓜分剩余空間中來宙攻，并且他是占據(jù)了剩余空間中的2份，那么此時父容器就會把剩余空間分為3份仇味，然后1份給到B1雹顺，2份給到B2廊遍。
flex-basis
flex-basis 的作用也就是 width 的替代品嬉愧。 如果子容器設(shè)置了 flex-basis 或者 width，那么在分配空間之前没酣，他們會先跟父容器預(yù)約這么多的空間卵迂，然后剩下的才是歸入到剩余空間，然后父容器再把剩余空間分配給設(shè)置了flex-grow 的容器见咒。 如果同時設(shè)置 flex-basis 和 width，flex-basis 的優(yōu)先級比 width 高下翎。有一點需要注意宝当，如果flex-basis 和 width 其中有一個是 auto视事，那么另外一個非 auto 的屬性優(yōu)先級會更高。
flex-shrink
該屬性來設(shè)置當(dāng)父元素的寬度小于所有子元素的寬度的和時（即子元素會超出父元素）俐东，子元素如何縮小自己的寬度。
flex-shrink 的默認(rèn)值為1虏辫，當(dāng)父元素的寬度小于所有子元素的寬度的和時，子元素的寬度會減小套利。值越大鹤耍，減小的越厲害。如果值為0稿黄，表示始終不減小。
如上面的例子 B1族购、B2、B3的 width 都為 200px 時寝杖，子元素的寬度和超過父元素的 500px互纯，如果 B1 設(shè)置了 flex-shrink: 0; ，則 B1 的大小為 200px留潦，B2 設(shè)置 flex-shrink: 3;，B3 設(shè)置 flex-shrink: 2;殖卑，則 B2坊萝、B3的縮小比例為 3：2。下面就是求解方程的過程了屹堰，我們可以設(shè)置 B2 的縮小比為 3a，B3 的縮小比為 2a扯键，則有等式 200px * (1 - 3a) + 200px * (1- 2a) = 500px - 200px ，計算得到 a = 0.1馅笙，所以 B2 的 width 為 140px，B3 的width 為 160px董习。
總結(jié)
- 如果父容器空間不夠，就使用壓縮 flex-shrink 招刹，否則使用擴張 flex-grow
- 如果你不希望某個容器在任何時候都不被壓縮窝趣，那設(shè)置 flex-shrink: 0
- 如果子容器的的 flex-basis 設(shè)置為0，那么計算剩余空間的時候?qū)⒉粫樽尤萜黝A(yù)留空間
