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

CSS のFlex(彈性布局)すると、Web ページのレイアウトを柔軟に制御できます。Flex Flex内の項目の幅と高さは、次の 3 つのプロパティによって決まります。
flex-basis 、 flex-grow 、 flex-shrink 。

フレックスベース

flex-basis は、アイテムが主軸上で占めるスペースの量を決定します。box box-sizingを使用して設定しない限り、コンテンツボックスのサイズが設定されるため、パディングと境界線が含まれる可能性が高いため、フレックスアイテムのサイズを指定するときは注意が必要です。

特定の CSS サイズ値を指定するか、親要素の占める割合を指定できます。デフォルト値はauto (コンテンツに応じてサイズを自動的に調整) です。

<!-- デモ-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;
    }
  </スタイル>

フレックスグロー

flex-grow は、フレックスコンテナーにスペースが残っている場合のアイテムのスケールを設定します (フレックスコンテナーのサイズからすべてのフレックスアイテムのサイズの合計を引いた値)。デフォルト値は 0 です (スペースが残っていても拡大されません)。すべてのアイテムの flex-grow プロパティ値が同じ場合、残りのスペースが均等に共有されます。それ以外の場合は、異なるプロパティ値によって定義された比率に従って分散されます。

たとえば、主軸の長さが600pxで、項目1が50px、項目2が100px、項目3が150pxを占める場合、残りのスペースは次のようになります: 600px - (50px + 100px + 150px) = 300px

各項目のflex-growプロパティ値が同じ場合 (たとえば、すべてが 1 の場合)、すべての項目に同じ残りのスペースが割り当てられます。
- 項目 1: 300px * (1 / (1 + 1 + 1)) = 100px;
- 項目 2: 300px * (1 / (1 + 1 + 1)) = 100px;
- 項目3: 300px * (1 / (1 + 1 + 1)) = 100px;

  <!-- デモ-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;
    }
  </スタイル>

各項目の flex-grow プロパティの値が同じではないと仮定します。たとえば、項目 1 が 1、項目 2 が 2、項目 3 が 3 の場合、それらに割り当てられる残りのスペースは次のようになります。
- 項目 1: 300px * (1 / (1 + 2 + 3)) = 50px;
- 項目 2: 300px * (2 / (1 + 2 + 3)) = 100px;
- 項目3: 300px * (3 / (1 + 2 + 3)) = 150px;

  <!-- デモ-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;
    }
  </スタイル>

属性値が小数の場合はどうなりますか?ここでは 2 つの状況があります。
1. すべてのフレックスアイテムのflex-gorw属性値の合計が1より大きい場合でも、計算は上記の方法で実行されます。
2. すべてのフレックスアイテムのflex-gorw属性値の合計が1未満で、基本値は1として計算されます。たとえば、アイテム1が0.2、アイテム2が0.3、アイテム3が0.4の場合、それらに割り当てられる残りのスペースは次のようになります。
- 項目1: 300px * (0.2 / 1) = 60px;
- 項目2: 300px * (0.3 / 1) = 90px;
- 項目3: 300px * (0.4 / 1) = 120px;

 <!-- デモ-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;
    }

フレックスシュリンク

flex-shrink は、フレックスコンテナーに十分なスペースがない場合のアイテムの拡大率を設定します。デフォルト値は 1 です (十分なスペースがない場合、アイテムは縮小されます)。

flex-shrink の計算方法は、flex-grow とは少し異なります。フレックスアイテムがどれだけ縮小するかに影響する要素は 2 つあります。1 つは flex-shrink プロパティの値で、もう 1 つはフレックスアイテム自体のサイズです。これらは、それぞれの重みに応じて縮小します。例:

主軸の長さは600px、項目1は100px、項目2は300px、項目3は500pxを占め、各項目のflex-shrink属性値はそれぞれ1、3、2です。合計の重みは100px 1 + 300px 3 + 500px * 2 = 2000pxで、各項目の重みは次のとおりです。
- 項目1: (100px * 1) / 2000px = 0.05;
- 項目 2: (300px * 3) / 2000px = 0.45;
- 項目3: (500px * 2) / 2000px = 0.50;
オーバーフロースペースの長さは、100px + 300px + 500px - 600px = 300px です。
次に、各プロジェクトを個別に縮小します。
- 項目1: 300px * 0.05 = 15px;
- 項目2: 300px * 0.45 = 135px;
- 項目3: 300px * 0.50 = 150px;

 <!-- デモ-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;
    }
  </スタイル>

同様に、flex-shrink の値が小数の場合、次の 2 つのケースがあります。
1. すべてのフレックスアイテムのflex-shrinkプロパティ値の合計が1より大きい場合でも、計算は上記の方法で実行されます。
2. すべてのフレックスアイテムのflex-shrinkプロパティ値の合計が1未満で、オーバーフロースペースの一部のみが縮小されます。たとえば、アイテム1が0.1、アイテム2が0.3、アイテム3が0.2の場合、合計の縮小スペースは次のようになります。
300ピクセル×（0.1＋0.3＋0.2）＝180ピクセル
各項目の重量計算方法は同じで、各項目は個別に縮小されます。
- 項目1: 180px * 0.05 = 9px;
- 項目2: 180px * 0.45 = 81px;
- 項目3: 180px * 0.50 = 90px;

 <!-- デモ-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;
    }
  </スタイル>

オーバーフロースペースの一部のみが縮小されるため、div 内の要素の合計幅は実際には div の幅を超えます。

上記は、フレックスレイアウトにおけるflex-growとflex-shrinkの計算方法についての簡単な紹介です。

このブログのコードはGithubに同期されています

参考文献:
[1] MDNドキュメント https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis
[2] MDNドキュメント https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow
[3] MDNドキュメント https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: HTML4とHTML5の違い: 入力にフォーカス実装コードを追加する方法

>>: スライドボタン効果を実現するネイティブJS