このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

flex-grow:フレックス・アイテムの伸長CSS3で追加

記事Mar. 23rd,2021
フレキシブルボックスレイアウトで空き空間をどれだけフレックス・アイテムに割り当てるかを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 flex-grow: 0;
適用対象 フレックス・アイテム
継承 しない
パーセント値 パーセント値は指定できません
計算値 指定された値
アニメーション 算出された値による

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

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

フレキシブル・ボックス・レイアウト

サンプルコード

div { flex-grow: 0.25;}

説明
<number> フレックス・コンテナ内にある空き空間のうち配分される比率を指定する (“0”以上の値で指定します。)
共通キーワード

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

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

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

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

仕様書

Level 1
作業草稿(WD)
flex-grow
定義あり

使用例

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

.flex-contain {
display: flex;
}

.item-1 {
flex-grow: 0;
background-color: #f5f5dc; /**/
}

.item-2 {
flex-grow: 0;
background-color: #ccff99; /**/
}

.item-3 {
flex-grow: 0;
background-color: #d8bfd8; /**/
}

.item-4 {
flex-grow: 0;
background-color: #b0E0E6; /**/
}
<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: #f5f5dc; /**/
}

.item-2 {
flex-grow: 0.25;
background-color: #ccff99; /**/
}

.item-3 {
flex-grow: 0.5;
background-color: #d8bfd8; /**/
}

.item-4 {
flex-grow: 0;
background-color: #b0E0E6; /**/
}
<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>

黒猫

白猫

三毛猫

茶トラ猫

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク