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

flex”プロパティ:フレックス・アイテムの寸法CSS3で追加

記事Mar. 23rd,2021
フレキシブルボックスレイアウトでフレックス・アイテムの伸長と縮小を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 flex: 0 1 auto;
適用対象 フレックス・アイテム
継承 No
パーセント値 一括指定が対象とする各プロパティの定義に依る
計算値 一括指定が対象とする各プロパティの定義に依る
アニメーション 計算値

flex”プロパティはフレキシブルボックスレイアウトでフレックス・アイテムの主軸方向の伸長と縮小、初期寸法を指定する以下のプロパティの一括指定プロパティです。

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

要素がフレックス・アイテム(親要素のdisplay”プロパティの値が“flex”か“inline-flex”)である場合は主軸方向の寸法を決める際にwidth”プロパティheight”プロパティではなく“flex”プロパティを参照します。

要素がフレックス・アイテムでない場合は“flex”プロパティは無視されます。

サンプルコード

div { flex: 1 1 auto;}

伸縮の詳細な指定

値はホワイトスペースで区切って、<'flex-grow'><'flex-shrink'><'flex-basis'>の順にそれぞれ1個ずつ記述します。

div { flex: 〚“<'flex-grow'>”値〛 〚“<flex-shrink>”値〛 〚“<'flex-basis'>”値〛;}

値を省略する場合、値は以下のように扱われます。

値として<number>を2個記述した場合
1個目の<number><'flex-grow'>、2個目の<number><'flex-shrink'>として扱い、省略された<'flex-basis'>は“0”として扱われます。
値として<number>を1個と<'flex-basis'>を1個記述した場合
<number><'flex-grow'>として扱い、省略された<'flex-shrink'>は“1”として扱われます。
値として<number>を1個だけ記述した場合
<number><'flex-grow'>として扱い、省略された<'flex-shrink'>は“1”、<'flex-basis'>は“0”として扱います。

キーワード値

説明
initial 初期値である“flex: 0 1 auto;”と同じ (主軸方向の寸法はwidth”プロパティheight”プロパティによって決められ、フレックス・コンテナからあふれる場合は縮小されますが、空き空間があっても伸長されません。)
auto flex: 1 1 auto;”と同じ (主軸方向の寸法はwidth”プロパティheight”プロパティによって決められ、フレックス・コンテナ内に空き空間があったり、あふれたりする場合には伸縮されます。)
none flex: 0 0 auto;”と同じ (主軸方向の寸法はwidth”プロパティheight”プロパティによって決められますが、伸縮されません。)
共通キーワード

仕様書

定義されている仕様書
Level 1
作業草稿(WD)
flex
定義あり

使用例

フレックス・アイテムの寸法を設定する

<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: 1 1 50px;
background-color: #d396a6; /**/
}

.item-2 {
flex: 1 1 100px;
background-color: #be96d3; /**/
}

.item-3 {
flex: 1 1 150px;
background-color: #27b6d3; /**/
}

.item-4 {
flex: 1 1 200px;
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: initial;
background-color: #d396a6; /**/
}

.item-2 {
flex: initial;
background-color: #be96d3; /**/
}

.item-3 {
flex: initial;
background-color: #27b6d3; /**/
}

.item-4 {
flex: initial;
background-color: #96d3c1; /**/
}

黒猫

白猫

三毛猫

茶トラ猫

.flex-contain {
display: flex;
}

.item-1 {
flex: auto;
background-color: #d396a6; /**/
}

.item-2 {
flex: auto;
background-color: #be96d3; /**/
}

.item-3 {
flex: auto;
background-color: #27b6d3; /**/
}

.item-4 {
flex: auto;
background-color: #96d3c1; /**/
}

黒猫

白猫

三毛猫

茶トラ猫

.flex-contain {
display: flex;
}

.item-1 {
flex: none;
background-color: #d396a6; /**/
}

.item-2 {
flex: none;
background-color: #be96d3; /**/
}

.item-3 {
flex: none;
background-color: #27b6d3; /**/
}

.item-4 {
flex: none;
background-color: #96d3c1; /**/
}

黒猫

白猫

三毛猫

茶トラ猫

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