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個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