フレックスレイアウトにおける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

推薦する

WeChatアプレットは固定ヘッダーとリストテーブルコンポーネントを実装します

目次必要:機能ポイントレンダリング実装のアイデア具体的なコード(react\taro3.0)特定のコ...

TypeScriptのインストールと使用方法と基本的なデータ型

最初のステップはTypeScriptをグローバルにインストールすることですnpmを使用してインストー...

要素 el-button ボタンコンポーネントの使用の詳細な説明

1. 背景ボタンは非常によく使われており、Element のボタン機能は非常に包括的です。この記事で...

moment.jsの時間と日付の処理の詳細な説明

月曜日から日曜日の時間形式の変換(Y --- 年 M --- 月 D--- 日) : : : : :...

vue+node+socket ioは複数人のインタラクションを実現し、プロセス全体を解放します

1. 背景1. フロントエンドはvue + vuex + socket.io-clientを使用しま...

CSSはBEM命名規則の実践を使用する

クラスを見るとき、どのような情報を得たいですか?このクラスはどこで使用され、その機能は何ですか?この...

CSS の複数行テキストがオーバーフローする場合の省略記号の例

複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...

jQueryはシンプルなカルーセル効果を実装します

みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のと...

nginx で SSL 証明書を設定して https サービスを実装する方法

前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...

ReactでのsetStateの使用と同期と非同期の使用

React では、this.state を使用して状態を直接変更しても、コンポーネントは再レンダリン...

nginx プロキシでの複数の 302 応答の解決策 (nginx Follow 302)

proxy_intercept_errors と recursive_error_pages を使...

HTML 選択オプションの基本的な理解と使用

JavaScript での HTML (選択オプション) の詳細な説明1. 基本的な理解:コードをコ...

NexusはAPIを使用して操作します

Nexus は RestApi を提供していますが、一部の API はまだ Groovy と組み合わ...

CSS3 オーバーフロープロパティの説明

1. オーバーフローOverflow はオーバーフロー(コンテナ)です。コンテンツがコンテナを越える...