“flex-grow”プロパティ:フレックス・アイテムの伸長

概要

“flex-grow”プロパティはフレキシブルボックスレイアウト内の主軸方向の空き空間をどれだけそのフレックス・アイテムに割り当てるかを指定するプロパティです。

フレックス・コンテナ内にある主軸方向の空き空間はフレックス・アイテムのそれぞれの“flex-grow”プロパティの値を比率として配分されます。

サンプルコード

div { flex-grow: 0.25;}


値

“1”はフレックス・コンテナ内にある空き空間の“100%”が配分されることを表します。

フレックス・コンテナ内にあるフレックス・アイテムが要求する配分量が“100%”を超える場合(“flex-grow”プロパティの値の合計が“1”を超える)はそれぞれの配分量の比率を保ったまま合計が“100%”になるように再計算されます。

フレックス・コンテナ内にあるフレックス・アイテムが要求する配分量が“100%”に満たない場合(“flex-grow”プロパティの値の合計が“1”以下)は“flex-grow”プロパティの値がそのままそのフレックス・アイテムの配分量を表します。例えば、“flex-grow: 0.25;”はフレックス・コンテナ内にある空き空間の“25%”が配分されます。残りの空間はどのフレックス・アイテムにも配分されず、空き空間のまま残ります。

値が“0”の場合にはそのフレックス・アイテムは伸長されません。

仕様書

定義されている仕様書

flex-grow

<number>

空き空間をフレックス・アイテムに分配しない

.flex-contain {

display: flex;

}

.item-1 {

flex-grow: 0;
background-color: #d396a6; /*■*/

}

.item-2 {

flex-grow: 0;
background-color: #be96d3; /*■*/

}

.item-3 {

flex-grow: 0;
background-color: #27b6d3; /*■*/

}

.item-4 {

flex-grow: 0;
background-color: #96d3c1; /*■*/

}

<div class="flex-contain">

<p class="item-1">

黒猫

</p>

<p class="item-2">

白猫

</p>

<p class="item-3">

三毛猫

</p>

<p class="item-4">

茶トラ猫

</p>

</div>

黒猫

白猫

三毛猫

茶トラ猫

空き空間をフレックス・アイテムに分配する

.flex-contain {

display: flex;

}

.item-1 {

flex-grow: 0.25;
background-color: #d396a6; /*■*/

}

.item-2 {

flex-grow: 0.25;
background-color: #be96d3; /*■*/

}

.item-3 {

flex-grow: 0.5;
background-color: #27b6d3; /*■*/

}

.item-4 {

flex-grow: 0;
background-color: #96d3c1; /*■*/

}

<div class="flex-contain">

<p class="item-1">

黒猫

</p>

<p class="item-2">

白猫

</p>

<p class="item-3">

三毛猫

</p>

<p class="item-4">

茶トラ猫

</p>

</div>

黒猫

白猫

三毛猫

茶トラ猫