📓 memotty

【TailwindCSS】grow(flex-grow)の使い方

使い方 #

growをつけた要素はメイン軸方向の余白を取得して伸びる。
複数要素に異なる係数を与えると、その比率で残り領域が配分される。

説明

<div class="flex gap-2">
  <div class="w-16 h-16 bg-blue-300">A</div>
  <div class="w-16 h-16 bg-green-300 grow">B</div>
  <div class="w-16 h-16 bg-red-300">C</div>
</div>
  • Bだけが伸びて余白を占領する
    • 逆に伸ばしたくない場合は grow-0 をつける

よくある使用シーン #

シーン効果
ヘッダーのロゴ + ナビ + 検索窓ロゴ・検索窓を grow-0、ナビに grow を付けて中央を可変幅に
カード内でサムネイル + テキスト画像を固定幅、テキストを grow で残りを埋める
ボタン列で「OK」だけ広げたい「OK」に grow、残りに grow-0

まとめ #

  • grow == flex-grow: 1: 空きスペース全部取る
  • grow-0: 伸びない
  • grow-N: 複数要素で比率配分
  • レイアウト調整やレスポンシブ対応に便利

参考 #

公式

Backlinks

Interactive Graph