Zenn
🙆

【CSS基礎】レスポンシブの味方！flex-growの使い方をマスターしよう

に公開
CSS
Scss
tech

こんにちは！今回は、CSSのFlexboxでよく使われるプロパティ flex-grow について解説します。

「要素を均等に並べたいけど、画面幅に合わせてうまく調整できない…」
そんな悩み、ありませんか？

実は flex-grow を使えば、余ったスペースを「いい感じに」配分するだけで、美しいレスポンシブデザインが実現できるんです！

flex-growって何？

一言で言えば、「余ったスペースをどれだけ伸ばすかを指定するプロパティ」です。

たとえばこんな状況を想像してみてください。

親要素の幅：500px

子要素Aの幅：100px

子要素Bの幅：100px

この時、親要素にはまだ「300px」分の余白がありますよね。この余白を、子要素A・Bにどう配分するか？ それを決めるのが flex-grow です。

実際にコードで見てみよう
まずは、基本形。

<div class="container">
  <div class="box a">A</div>
  <div class="box b">B</div>
</div>

.container {
  display: flex;
  width: 500px;
}


.box {
  flex-basis: 100px;
  height: 100px;
}

.a {
  flex-grow: 1;
}

.b {
  flex-grow: 2;
}

この場合、余った300pxを「1:2」の割合で分けます。

A：100px（基準）＋100px（余白の1/3）＝200px

B：100px（基準）＋200px（余白の2/3）＝300px

結果的に、Aは200px、Bは300pxの幅になります。

どんなときに使うの？

flex-growはこんなシーンで大活躍します。

ナビゲーションメニューを均等に広げたいとき

画面サイズに応じてコンテンツ幅を変えたいとき

カードUIの列幅を整えたいとき

画面サイズが変わっても、比率で伸び縮みしてくれるから、いちいちメディアクエリで調整しなくてOK！

ちょっと注意点

flex-growの初期値は0 なので、指定しないと伸びません。

余白がないと変化しない：親要素にもう余白がない場合、flex-growは効果を発揮しません。

まとめ

flex-grow は「余ったスペースを比率で割り当てる」プロパティ

元の幅ではなく、「余白」をどう配分するかを指定

レスポンシブなレイアウト作りに超便利！

Flexboxは慣れるととても強力な武器になります。
今回の flex-grow をマスターして、快適なレイアウトづくりを楽しんでくださいね！

Discussion