flex-growプロパティを理解する 子要素の比率を指定し、親要素の余白を埋める
flex-growとは？
flex-grow プロパティは、flexアイテムの比率を決めます。 flexコンテナ（親要素）内に余白があるとき、 余白部分をflexアイテムに指定した比率の分だけ追加します。
つまり、親要素に余白がない時に、flex-growを指定しても何も変化はありません。
flex-growの指定方法
<div class="wrapper">
<div class="item1">Item1</div>
<div class="item2">Item2</div>
<div class="item3">Item3</div>
</div>
<style>
.wrapper {
display: flex;
width: 100%;
}
.item1,
.item2,
.item3 {
width: 20%;
height: 100px;
}
</style>
.item1 {
flex-grow: ;
}
.item2 {
flex-grow: ;
}
.item3 {
flex-grow: ;
}
flex-growの初期値は０です。
子要素すべてにflex-grow: 1;を指定すると、 同じ比率でwidthが追加され、余白を埋めてくれます。
それぞれの子要素に違う値を指定すると、その比率で各要素のwidthが伸縮します。
flexboxの主軸と交差軸に注意！
上記の記述は、flex-direction（主軸）がrow（横並び）の場合です。
flex-directionがcolumnの場合は、縦方向の余白を埋めます。
参考
まとめ
- flex-grow プロパティは、flexアイテムの比率を決める。
- 親要素に余白がない時に、flex-growを指定しても何も変化はない。
- flexboxの主軸と交差軸に注意が必要。
こんな記事も読まれています。
-
【CSS】box-sizing: border-boxとは？指定するメリットは？
CSSのbox-sizing: border-boxについて解説します。指定することによりレイアウトしやすくなります。また、親要素からはみ出すことも防げます。
-
【CSS】box-sizing: border-boxとは？指定するメリットは？
CSSのflexboxで上下左右、中央の配置の方法について説明します。justify-contentで左右の配置を、align-itemsで上下の配置を決めます。flex-start,center,flex-endの使い方。
- リンク
-
【CSS】transformのrotateとtransform-originについて。回転させる基点を変える
CSSのrotateについて解説します。指定によりZ軸、X軸、Y軸で回転させます。またtarnsform-originを指定することにより、回転する基点を移動させることができます。
-
【CSS】filterの使い方 画像をぼかしたり、色の変化を適用させる
【CSS】filterの使い方について解説します。画像をぼかしたり、色の変化を適用させるには？ brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、saturate、sepiaの設定方法
- リンク
-
【CSS】perspective と transform-style で3D表現。立方体を作ってみよう。
CSSのperspectiveとtransform-styleについて解説します。CSSだけで３Dを表現できます。立方体をつくり、それを応用する方法も紹介します。
-
【CSS】animation パート2 アニメーションの動き（time-function）,遅延時間（delay）,方向（direction）について
【CSS】animation のアニメーションの動き（time-function）,遅延時間（delay）,方向（direction）について解説します。。
- リンク
-
【css】grid-templateでtwitter風に画像を表示させる方法
grid-templateを使えば、画像を思い通りに配置できます。twitter風に画像を表現することができます。
-
リンク
-
【CSS】マウスを乗せた（ホバーした）時、サムネイル画像を拡大・縮小する方法
CSSでマウスをホバーした時、サムネイル画像を拡大・縮小する方法。overflow: hiddenやtransform: scale();を使い、拡大、縮小させます。
