flex-growとは
- ここで説明するflex-grow とは次の語句からなるCSSのプロパティです。
- flex
- 読み: フレックス
意味: 曲げる - grow
- 読み: グロウ
意味: 伸びる、増大
flex-growプロパティの概要
このプロパティはフレックスアイテムの主軸方向の伸び率を指定することができます。
これはフレックスコンテナー内の全てのフレックスアイテムの合計寸法を除く残りの余白に、 それぞれのフレックスアイテムを、いくらの割合で埋めるかを指定することになります。
簡単にいうと余白を埋めるためのプロパティであり、埋め方の割合を調整をすることができるということです。
このプロパティの設定値には0以上の正の数を指定します。負の値は無効となります。
構文
サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。
セレクター{flex-grow: 設定値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
フレックスボックス内にフレックスアイテムを表示させるには、親要素のボックスに対して displayプロパティにflexキーワードを設定する必要があります。
初期値: 0
初期値は0です。
このサンプルのようにフレックスコンテナーの横幅を広く設定した場合、 0を指定するとどのアイテムにも余白に対する数値が無いので、残りの空間が開いてしまうことになります。
<style>
.clsFlex{
display: flex;
text-align: center;
padding: 5px;
margin: 0 10px 10px 10px;
border: solid 3px black;
background-color: black;
width: 600px;
height: 100px;
}
.clsFlex .clsGorw{
flex-grow: 0;
margin: 5px;
padding: 5px;
background-color: ##lightgreen;
}
</style>
<body>
<div class ="clsFlex">
<div class ="clsGorw">flex-grow: 0;</div>
<div class ="clsGorw">flex-grow: 0;</div>
</div>
</body>
数値: 正の数
このプロパティで設定できる数値は正の数です。負の値は無効となります。 このサンプルでは2つのフレックスアイテムに別々の値を設定しています。
ここではflex-growに1と2の値を設定しましたが、例えば0をどちらか一方に設定した場合や、正の数を一方に指定した場合でも余白残りの空間は埋まります。
<style>
.clsFlex{
display: flex;
text-align: center;
padding: 5px;
margin: 0 10px 10px 10px;
border: solid 3px black;
background-color: black;
width: 600px;
height: 100px;
}
.clsFlex .clsGorw{
margin: 5px;
padding: 5px;
background-color: ##lightgreen;
}
#idGorw1{
flex-grow: 1;
}
#idGorw2{
flex-grow: 2;
}
</style>
<body>
<div class ="clsFlex">
<div id="idGorw1" class ="clsGorw">flex-grow: 1;</div>
<div id="idGorw2" class ="clsGorw">flex-grow: 2;</div>
</div>
</body>
グローバル値
flex-growプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。
- inheritは親要素の値の継承を促します。
- initialは値を初期値の0に戻します。
-
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{flex-grow: グローバル値;}補足説明
- フロー内の疑似要素を含むフレックスアイテムに適用可能
- 親要素の値を継承しない