flex布局概念：
父級元素稱為：容器（container）
容器子元素成為：項目（item）
<div class="container"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> <div class="box box5">5</div> <div class="box box6">6</div> </div>
flex-grow：這是 項目 的一個屬性，定義了項目的放大 比例，如果為0，即使有剩余空間也不會放大。
解決的問題：空間有多余時把多余空間分配給各個子元素（項目）。
通俗理解：以上面代碼做說明，container有1800px寬度，6個box（item）分別為200px，那么container剩余的寬度則為 600px，flex-grow就是用來設置box怎樣瓜分剩余空間（寬度）。
flex-grow取值為非負數（注：如果取值為負數那么和0的取值效果相同）。
默認情況
box的flex-grow默認值為0
<style> .container { background-color: #999; margin: 20px; padding: 20px 0; display: flex; width: 1800px; } .box { width: 200px; height: 100px; font-size: 50px; text-align: center; color: #F00; } </style> <div class="container"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> <div class="box box5">5</div> <div class="box box6">6</div> </div>
效果如下： 
1. 取正整數
概念：將所有正整數相加得到分母sum，每個屬性的數值作為分子，然后乘以剩余空間。
公式：分之/分母*剩余空間
例子1：
.box1,
.box2,
.box3 {
flex-grow:1
}
剩余寬度的分母：sum=1+1+1=3
box1分到的寬度：1/3*600px=200px
box2分到的寬度：1/3*600px=200px
box3分到的寬度：1/3*600px=200px
box1-box6的寬度分別為：400px、400px、400px、200px、200px、200px 
例子2：
.box1 {
flex-grow:1
}
.box2 {
flex-grow:2
}
.box3 {
flex-grow:3
}
剩余寬度的分母：sum=1+2+3=6
box1分到的寬度：1/6*600px=100px
box2分到的寬度：1/3*600px=200px
box3分到的寬度：1/2*600px=300px
box1-box6的寬度分別為：300px、400px、500px、200px、200px、200px 
2. 取小數
概念：小數乘以剩余空間。
公式：小數*剩余空間
例子：
.box1 {
flex-grow: 0.1
}
.box2 {
flex-grow: 0.2
}
box1分到的寬度：0.1*600px=60px
box2分到的寬度：0.2*600px=120px
剩余的寬度 600-（60+120）= 420 沒有使用
box1-box6的寬度分別為：260px、320px、200px、200px、200px、200px 
3. 小數+正整數
計算方式與正整數一樣，如分母取值：sum=0.1+0.2+1=1.3，分子分別為：0.1/1.3、0.2/1.3、1/1.3
參考文章：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://zhuanlan.zhihu.com/p/24372279
