flex-growプロパティの説明
CSSのflex-growプロパティは、フレックス・アイテムが伸長する倍率を指定します。厳密に言い表すと、コンテナの主軸方向に対する伸長係数を定めます。
ここで指定できる値は、正数あるいは小数点を含む数値です。多くの場合、この値はショートハンド・プロパティのflexで指定します。
このプロパティは、コンテナの中に余りの空間ができた時、どのようにアイテムに割り振るのかを定義します。余りの空間とは、コンテナの寸法から全てのアイテムの寸法を引いたものです。この空間をどのように割り振るかは、伸縮係数の比率によって決まります。
フレックス・ボックスの主軸方向はflex-directionの値で決まり、既定では横方向になっています。
これらの機能の関係性を把握したい方は、フレックス・ボックスの解説を参照して下さい。
flex-growに指定できる値
<number>- CSSで使用できる整数または有限小数を表すデータ型の値です。アイテムが伸長する倍率を指定します。負の値は使用できません。既定値は
0です。
flex-growの使い方とサンプルコード
flex-growプロパティの構文は以下の通りです。
/* <number>値 */
flex-grow: 0;
flex-grow: 1;
flex-grow: 0.5;
/* グローバル値 */
flex-grow: inherit;
flex-grow: initial;
flex-grow: revert;
flex-grow: revert-layer;
flex-grow: unset;
flex-growの実例
それでは実際にflex-growプロパティの書き方を見ていきましょう。以下の例では、flex-shrinkとflex-basisの値が共通であるアイテムに、別の値を持つflex-growを指定した場合の挙動を確認できます。各アイテムに記載してある数字が、その値です。
resizeに対応しているブラウザであれば、コンテナのサイズを変更できます。コンテナの右下に表示されるハンドルを掴んで、横幅を伸縮させてみて下さい。
<div class="flex_box">
<div class="flex_item fg_0">0</div>
<div class="flex_item fg_1">1</div>
<div class="flex_item fg_2">2</div>
</div>
<div class="flex_box">
<div class="flex_item fg_1">1</div>
<div class="flex_item fg_1">1</div>
<div class="flex_item fg_4">4</div>
</div>
<div class="flex_box">
<div class="flex_item fg_1">1</div>
<div class="flex_item fg_2">2</div>
<div class="flex_item fg_3">3</div>
<div class="flex_item fg_4">4</div>
</div>
.flex_box {
overflow: auto;
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
padding: 1rem;
background: #eee;
resize: horizontal;
}
.flex_item {
width: 100px;
padding: .3rem;
background: #09f;
color: #fff;
flex-shrink: 0;
flex-basis: 100px;
}
.fg_0 {
flex-grow: 0;
}
.fg_1 {
flex-grow: 1;
}
.fg_2 {
flex-grow: 2;
}
.fg_3 {
flex-grow: 3;
}
.fg_4 {
flex-grow: 4;
}
flex-growに指定する値は、あくまでコンテナに余りの空間があった場合に各アイテムへ割り振る倍率です。アイテムの数が多かったり余白が少なければ、その分アイテムの寸法は似たようなものになります。
アイテムの寸法に違いを出すには、flex-basisを使用します。アイテムをコンテンツの寸法に合わせたり折り返しの制御も行えるので、flex-growを指定する祭には合わせて活用しましょう。
関連するプロパティの指定方法については、flexで解説を行います。