【CSS】flex-growの使い方！flexアイテムの大きさを倍率で指定する方法を解説

flex-grow は、flexアイテムの比率を指定できるプロパティです。flexアイテムの伸長を width や height を使用するよりも自在に操ることができるため、効率的なコーディングに有用です。

この記事では flex-grow の使い方を解説します。

flex-grow は、flexboxプロパティの一種です。flexboxはCSSのレイアウト作成に効果的な手法ですが、学習が難しいと感じる場合もあるのではないでしょうか。

flexboxについては、こちらの記事で詳しく解説しています。flexboxプロパティを網羅した内容となっているので、ぜひ学習にお役立てください。

【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

flex-growとは

flex-grow は、flexアイテムの比率を決めるプロパティです。flexコンテナ内に余白があるとき、余白部分をflexアイテムに指定した比率の分だけ追加します。

例えばflexコンテナ内に2つのflexアイテムがあり、それぞれ flex-grow: 1; 、flex-grow: 2; と指定したとします。

この場合、flexコンテナの余白部分はflexアイテムの横幅に追加され、flexアイテムは 1 : 2 の割合で表示されます。

flex-growの使い方

flex-grow はflexアイテムに対して有効であるため、flexコンテナ（親要素）に display: flex; を、flexアイテム（子要素）に flex-grow をそれぞれ指定します。

以下が基本形です。

<div class="flexbox">
  <div class="item01">flex-grow: 1;</div>
  <div class="item02">flex-grow: 2;</div>
</div>

.flexbox {
  display: flex;
}

.item01 {
  flex-grow: 数値;
}

<div class="flexbox">
  <div class="item01">flex-grow: 1;</div>
  <div class="item02">flex-grow: 2;</div>
</div>

.flexbox {
  display: flex;
  text-align: center;
  border: 1px solid #000;
}

.flex-item {
  color: #fff;
  width: 20%;
}

.item01 {
  background: red;
}

.item02 {
  background-color: blue;
}

flexアイテムが左寄せで並び、親要素の右側には余白が空いています。この余白の部分を、任意の比率でflexアイテムに追加するのが flex-grow の働きです。

flex-grow を使用したとき、実際にどう変化するのかを見ていきましょう。

<div class="flexbox">
  <div class="item01">flex-grow: 1;</div>
  <div class="item02">flex-grow: 2;</div>
</div>

.flexbox {
  display: flex;
  text-align: center;
  border: 1px solid #000;
}

.flex-item {
  color: #fff;
  width: 20%;
}

.item01 {
  background: red;
  flex-grow: 1;
}

.item02 {
  background-color: blue;
  flex-grow: 2;
}

flexコンテナ内の余白部分は、flexアイテムに追加されました。

ピンク色の要素には flex-grow: 1; を、水色の要素には flex-grow: 2; をそれぞれ指定しました。このため、2つの要素の比率は 1 : 2 となっています。

なお、flex-grow: 0;（初期値）のとき、flexアイテムの横幅はそれぞれの最小の幅となります。flexアイテム中のテキストが2文字の場合は2文字分の横幅、4文字の場合は4文字分の横幅となることに注意しましょう。

flexアイテムの主軸・クロス軸

今回の例では flex-direction の値が row （横並び）のため横幅が伸長しましたが、column （縦並び）の場合は高さが伸長します。

flex-direction によるflexアイテムの並ぶ向きのことを「主軸」といい、主軸と交差する向きを「クロス軸」といいます。

主軸とクロス軸については flex-direction を学習すると理解しやすくなります。こちらの記事で、flex-direction について詳しく解説しています。併せて学習してみましょう。

【CSS】flex-directionで要素を縦並び・横並びにする方法を解説

flex-growに関連するプロパティ

flex-grow には、関連するプロパティがあります。それぞれを理解しておくと学習しやすいので、セットで学習しましょう。

flex-growと関連するプロパティは以下のとおりです。

flex-shrink

flex-shrink は、flexアイテムの伸縮率を決めるプロパティです。flex-grow では伸び率を指定できるのに対して、flex-shrink では縮み率を指定できます。

flexアイテムは、親要素の幅をはみ出したときに自動的に縮小し、均等な大きさになる性質があります。flex-shrink を使うことで、はみ出した部分を縮小させたり、わざとはみ出させたりすることができます。

flex-shrink についてはこちらの記事で詳しく解説しています。併せてお読みください。

【CSS】flex-shrinkでflexアイテムを縮小させる方法を解説

flex-basis

flex-basis はflexアイテムの大きさを指定するプロパティです。flexアイテムの横幅もしくは高さを指定できるので、width や height を使用するよりも簡単にflexアイテムの大きさを変更できます。

flex-basis で指定した大きさは、flex-grow や flex-shrink の基準の値となります。

flex-basisについては、こちらの記事でより詳しく解説しています。併せてお読みください。

【CSS】flex-basisの使い方を解説！widthやheightとの違いは？

flex

flex は、flexアイテムの大きさをショートハンドで指定できるプロパティです。

flex の値の意味や、指定する個数や単位によって変わります。例えば flex: 1; とした場合は flex-grow: 1; と同じ意味になり、flex: 40%; とした場合は flex-basis:  40%; という意味になります。

flex-grow  , flex-shrink , flex-basis の3つをショートハンドで指定することもできるので、使いこなせばコーディングの効率を上げられます。

flex についてはこちらの記事で詳しく解説しております。併せてお読みください。

【CSS】flexアイテムの大きさと伸縮を一括指定する方法を解説

まとめ

flex-grow はflexアイテムの大きさを伸長させるプロパティです。flexアイテムの大きさそのものが変わるわけではなく、親要素に余白がある場合に、その余白部分を指定した比率でflexアイテムに反映します。

flex-grow は特定のflexアイテムだけを大きくしたいときやレスポンシブ対応時などに大きく役立つので、使いこなしていきましょう。

flex-growまとめ

• flexアイテムを伸ばすプロパティ
• display:flex; と併用する
• 親要素の余白を指定したflexアイテムに追加する

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー