【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: 複数要素で比率配分- レイアウト調整やレスポンシブ対応に便利