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

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

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

推薦する

Linux で AutoFs マウント サービスをインストールするチュートリアル

Samba サービスでも NFS サービスでも、サーバーの起動時にリモート共有リソースが自動的にマ...

vuex で履歴を実装するためのサンプルコード

私は最近、ユーザー操作を元に戻す、またはやり直す機能を備えたビジュアル操作プラットフォームを開発して...

WeChatアプレットが検索ボックス機能を実装

この記事の例では、WeChatアプレットの検索ボックス機能を実装するための具体的なコードを参考までに...

JS を使って 1 分で github+Jekyll ブログに訪問カウント機能を追加する実装

目次1分でgithub+Jekyllブログにトラフィック機能を追加する1. ジェクルとは何か1. J...

一般的なMySQLストレージエンジンの長所と短所

目次すべてのストレージエンジンを表示InnoDB ストレージ エンジンMyISAM ストレージエンジ...

Vite2とVue3を使用したウェブサイトの国際化を実現するプロセス全体

目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...

MySQL はデータベースを動的に更新します スクリプト例の説明

具体的なupgradeスクリプトは次のとおりです。インデックスを動的に削除する アップグレードが存在...

MySQL 8.0.22 の最新バージョンのダウンロードとインストールの超詳細なチュートリアル (Windows 64 ビット)

目次序文1. 公式サイトからMySQL 8.0.22をダウンロードする2. 環境変数を設定する3. ...

ES5とES6の違いを分析する

目次概要関数シグネチャオプションパラメータ非厳密モード例外処理実用要約する概要ご存知のとおり、ES6...

JavaScriptのスリープ関数の使用

目次1.スリープ機能2.タイムアウトを設定する3. 約束4. 非同期待機5. 1秒後に出力1、2秒後...

HTML iframe 使用状況の概要の収集

Iframe 使用状況の詳細な分析<iframe frameborder=0 width=17...

Vue3 での Teleport の使用に関する詳細な説明

目次テレポートの目的テレポートの仕組みこの記事では、以下の内容を取り上げます。テレポートの目的テレポ...

Vueカウンターの実装

目次1. カウンターの実装2. 成果を達成する1. カウンターの実装ページにカウンターを実装するだけ...

CSS を使用して半透明の背景と不透明なテキストを実現する例

この記事では、CSS を使用して半透明の背景と不透明なテキストの効果を実現する方法の例を紹介します。...

CSS XTHML の記述標準とよくある問題の概要 (ページ最適化)

プロジェクトドキュメントディレクトリDiv+CSS 命名規則 - 4 - Div+css 命名規則 ...