フレックスレイアウトにおけるflex-growとflex-shrinkの計算方法の詳しい説明

<!-- デモ-1 -->

  <div class="parent">
    <div class="child1">100ピクセル</div>
    <div class="child2">200ピクセル</div>
  </div>
  <div class="parent">
    <div class="child1">10%</div>
    <div class="child2">20%</div>
  </div>
  <div class="parent">
    <div class="child1">30%</div>
    <div class="child2">自動</div>
  </div>

  <スタイル>
    。親 {
      幅: 500ピクセル;
      ディスプレイ: フレックス;
      下部マージン: 15px;
      テキスト配置: 中央;
      背景色: #eeeeee;
    }

    /** ピクセル値 */
    .親:n番目の子(1) .子1 {
      フレックスベース: 100px;
      背景色: #356969
    }
    .親:n番目の子(1) .子2 {
      フレックスベース: 200px;
      背景色: #369925;
    }

    /** パーセンテージ */
    .親:n番目の子(2) .子1 {
      フレックスベース: 10%;
      背景色: #356969
    }
    .親:n番目の子(2) .子2 {
      フレックスベース: 20%;
      背景色: #369925;
    }

    /** 自動*/
    .親:n番目の子(3) .子1 {
      フレックスベース: 30%;
      背景色: #356969
    }
    .親:n番目の子(3) .子2 {
      flex-basis: 自動;
      背景色: #369925;
    }
  </スタイル> 

  <!-- デモ-2 -->

  <div class="parent">
    <div class="child1">50ピクセル + 100ピクセル</div>
    <div class="child2">100ピクセル + 100ピクセル</div>
    <div class="child3">150ピクセル + 100ピクセル</div>
  </div>

  <スタイル>
    。親 {
      幅: 600ピクセル;
      ディスプレイ: フレックス;
      テキスト配置: 中央;
      色: #eee;
    }

    .child1 {
      フレックスベース: 50px;
      フレックス成長: 1;
      背景色: #0066CC;
    } 

    .child2 {
      フレックスベース: 100px;
      フレックス成長: 1;
      背景色: #009900;
    }

    .child3 {
      フレックスベース: 150px;
      フレックス成長: 1;
      背景色: #CC3300;
    }
  </スタイル> 

  <!-- デモ-3 -->

  <div class="parent">
    <div class="child1">50ピクセル + 50ピクセル</div>
    <div class="child2">100ピクセル + 100ピクセル</div>
    <div class="child3">150ピクセル + 150ピクセル</div>
  </div>

  <スタイル>
    。親 {
      幅: 600ピクセル;
      ディスプレイ: フレックス;
      テキスト配置: 中央;
      色: #eee;
    }

    .child1 {
      フレックスベース: 50px;
      フレックス成長: 1;
      背景色: #0066CC;
    } 

    .child2 {
      フレックスベース: 100px;
      フレックス成長: 2;
      背景色: #009900;
    }

    .child3 {
      フレックスベース: 150px;
      フレックス成長: 3;
      背景色: #CC3300;
    }
  </スタイル>

 <!-- デモ-4 -->

  <div class="parent">
    <div class="child1">50ピクセル + 60ピクセル</div>
    <div class="child2">100ピクセル + 90ピクセル</div>
    <div class="child3">150ピクセル + 120ピクセル</div>
  </div>

  <スタイル>
    。親 {
      幅: 600ピクセル;
      ディスプレイ: フレックス;
      テキスト配置: 中央;
      色: #eee;
    }

    .child1 {
      フレックスベース: 50px;
      フレックス成長: 0.2;
      背景色: #0066CC;
    } 

    .child2 {
      フレックスベース: 100px;
      フレックス成長: 0.3;
      背景色: #009900;
    }

    .child3 {
      フレックスベース: 150px;
      フレックス成長: 0.4;
      背景色: #CC3300;
    }

 <!-- デモ-5 -->

  <div class="parent">
    <div class="child1">100ピクセル - 15ピクセル</div>
    <div class="child2">300ピクセル - 135ピクセル</div>
    <div class="child3">500ピクセル - 150ピクセル</div>
  </div>
  <スタイル>
    。親 {
      幅: 600ピクセル;
      ディスプレイ: フレックス;
      テキスト配置: 中央;
      色: #eee;
    }

    .child1 {
      フレックスベース: 100px;
      フレックスシュリンク: 1;
      背景色: #0066CC;
    } 

    .child2 {
      フレックスベース: 300px;
      フレックス収縮: 3;
      背景色: #009900;
    }

    .child3 {
      フレックスベース: 500px;
      フレックス収縮: 2;
      背景色: #CC3300;
    }
  </スタイル> 

 <!-- デモ-6 -->

  <div class="parent">
    <div class="child1">100ピクセル - 9ピクセル</div>
    <div class="child2">300ピクセル - 135ピクセル</div>
    <div class="child3">500ピクセル - 90ピクセル</div>
  </div>

    <スタイル>
    。親 {
      幅: 600ピクセル;
      ディスプレイ: フレックス;
      テキスト配置: 中央;
      色: #eee;
    }

    .child1 {
      フレックスベース: 100px;
      フレックス収縮: 0.1;
      背景色: #0066CC;
    } 

    .child2 {
      フレックスベース: 300px;
      フレックス収縮: 0.3;
      背景色: #009900;
    }

    .child3 {
      フレックスベース: 500px;
      フレックス収縮: 0.2;
      背景色: #CC3300;
    }
  </スタイル>