flex-growプロパティは、Flexboxレイアウトにおいて、フレックスアイテムが利用可能な空間に対してどれだけの大きさとなるかを指定します。値が大きいほど、コンテナの空間をより多く占めるようになります。
INDEX
flex-growの値とその効果の一覧
- 0: アイテムはそのままで、固定された幅を保ちます。
- 1: アイテムはコンテナ内で均等で、残りのスペースを分配します。
- 2: アイテムは他のアイテムよりも2倍となり、より多くのスペースを占有します。
注意点と関連情報
flex-growの値は、他のアイテムに対して相対的な割合を示します。複数のアイテムがflex-growを持つ場合、割合がflex-growの値に応じて決まります。値が0の場合、固定の幅を維持します。
flex-growプロパティが効かない時の原因と対策
display: flex;が親要素に指定されていない
flex-growプロパティは、フレックスコンテナ内の子要素に対してのみ機能します。親要素にdisplay: flex;が指定されていない場合、flex-growは機能しません。
対策: 親要素にdisplay: flex;を指定し、フレックスレイアウトを有効にしているか確認しましょう。これによって、子要素にflex-growを適用できるようになります。
子要素に幅や高さが固定されている
flex-growプロパティは、要素が余白を埋めるように成長するためのプロパティですが、子要素にwidthやheightが固定で指定されていると、flex-growの効果が無効になります。
対策: 子要素のwidthやheightが明示的に設定されていないか確認し、それらの値がautoやinitialなど、フレックスレイアウトに合わせた設定になっているか確認しましょう。
共通するCSSコード
.css-sample-container {
display: flex;
background-color: #f0f0f0;
padding: 10px;
width: 100%;
max-width: 600px;
margin-bottom: 20px;
border: 1px solid #ccc;
gap: 10px;
}
.css-sample-box {
background-color: #ffcc99;
padding: 10px;
text-align: center;
border: 1px solid #999;
width: 100px;
}flex-grow: 0
アイテムはそのままで、固定の幅を保つ例です。
HTMLコード
<div class="css-sample-container flex-grow-0">
<div class="css-sample-box css-sample-box-0">Box 1</div>
<div class="css-sample-box css-sample-box-0">Box 2</div>
<div class="css-sample-box css-sample-box-0">Box 3</div>
</div>CSSコード
.flex-grow-0 .css-sample-box-0 {
flex-grow: 0;
}表示結果
Box 1
Box 2
Box 3
flex-grow: 1
アイテムが均等で、スペースを分配する例です。
HTMLコード
<div class="css-sample-container flex-grow-1">
<div class="css-sample-box css-sample-box-1">Box 1</div>
<div class="css-sample-box css-sample-box-1">Box 2</div>
<div class="css-sample-box css-sample-box-1">Box 3</div>
</div>CSSコード
.flex-grow-1 .css-sample-box-1 {
flex-grow: 1;
}表示結果
Box 1
Box 2
Box 3
flex-grow: 2
アイテムが他のアイテムの2倍となります。
HTMLコード
<div class="css-sample-container flex-grow-2">
<div class="css-sample-box">Box 1</div>
<div class="css-sample-box css-sample-box-2">Box 2</div>
<div class="css-sample-box">Box 3</div>
</div>CSSコード
.flex-grow-2 .css-sample-box-2 {
flex-grow: 2;
}表示結果
Box 1
Box 2
Box 3
まとめ
- flex-growは、フレックスアイテムがコンテナ内の余白に対してどの程度のひりつとなるかを指定します。
- 0: そのままの固定幅を維持。
- 1: コンテナ内の余白を均等に分配。
- 2: 他のアイテムの2倍となる。