flex-grow

flex-grow

flexアイテムのgrow方法を制御するためのユーティリティ。

クラススタイル

クラス	スタイル
`grow`	`flex-grow: 1;`
`grow-<数値>`	`flex-grow: <数値>;`
`grow-[<値>]`	`flex-grow: <値>;`
`grow-(<カスタムプロパティ>)`	`flex-grow: var(<カスタムプロパティ>);`

grow

flex-grow: 1;

grow-<数値>

flex-grow: <数値>;

grow-[<値>]

flex-grow: <値>;

grow-(<カスタムプロパティ>)

flex-grow: var(<カスタムプロパティ>);

例

アイテムを伸長させる

flexアイテムが利用可能なスペースを埋めるように伸長させるには、growを使用します。

<div class="flex ...">
  <div class="size-14 flex-none ...">01</div>
  <div class="size-14 grow ...">02</div>
  <div class="size-14 flex-none ...">03</div>
</div>

係数に基づいてアイテムを伸長させる

grow-3のようなgrow-<数値>ユーティリティを使用して、flexアイテムを成長係数に基づいて比例的に伸長させ、互いに対して利用可能なスペースを埋めるようにします。

<div class="flex ...">
  <div class="size-14 grow-3 ...">01</div>
  <div class="size-14 grow-7 ...">02</div>
  <div class="size-14 grow-3 ...">03</div>
</div>

アイテムが伸長するのを防ぐ

flexアイテムが伸長するのを防ぐには、grow-0を使用します。

<div class="flex ...">
  <div class="size-14 grow ...">01</div>
  <div class="size-14 grow-0 ...">02</div>
  <div class="size-14 grow ...">03</div>
</div>

カスタム値の使用

次の grow-[<値>] 構文を使用してflex 伸長係数を完全にカスタム値に基づいて設定します

<div class="grow-[25vw] ...">
  <!-- ... -->
</div>

CSS変数の場合は、以下も使用できます： grow-(<カスタムプロパティ>) 構文

<div class="grow-(--my-grow) ...">
  <!-- ... -->
</div>

これは単なる省略形です grow-[var(<カスタムプロパティ>)] var()関数を自動的に追加する。

レスポンシブデザイン

プレフィックスa flex-growユーティリティをmd:のようなブレークポイントバリアントで、ユーティリティを適用するのはミディアム画面サイズ以上の場合のみです

<div class="grow md:grow-0 ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。

このページ内