SoyaBlog

これを見れば解決しそうや

HOME>CSS>flex-growについて解説
ブログ投稿日時:
ブログ更新日時:
flex-growについて解説

flex-growについて解説

  1. flex-grow とは
  2. flex-grow の指定方法
  3. 今回のまとめ
1.

order とは

flex-grow は親要素に余ったスペースがあった場合、指定のある子要素が他の子要素に対してどれくらい伸びるかを指定するプロパティです。

2.

flex-grow の指定方法

それでは flex-grow の指定方法を見ていきましょう。

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.items {
 display: flex;
 gap: 16px;
}

.item {
 color: #fff;
 height: 50px;
}

.item:nth-child(1) {
 flex-grow: 1;
 background-color: #ff0000;
}

.item:nth-child(2) {
 flex-grow: 2;
 background-color: #00ff00;
}

.item:nth-child(3) {
 flex-grow: 3;
 background-color: #0000ff;
}
HTMLとCSSの表示
1
2
3

上記のように flex-grow を赤に1、緑に2、青に3を指定しているので、その割合に応じて領域が決まりました。

今回は flex-grow の合計値が6なので、flex-grow: 3; を指定している青の部分は全体の50%の領域を確保しました。

3.

今回のまとめ

この記事では flex-grow について解説しました。

flex-grow は親要素に余ったスペースがあった場合、指定のある子要素が他の子要素に対してどれくらい伸びるかを指定するプロパティです。

flex-grow を使えるようになると比率管理がとても楽になるのでぜひ、この記事を見て使いこなせるようになると嬉しいです。

最後までお読みいただきありがとうございます。