flex-growについて解説

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;
}

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

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

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

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

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

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