Mar. 23rd,2021
プロパティについて
＃
概要
| 初期値 | “flex: 0 1 auto;” |
| 適用対象 | フレックス・アイテム |
| 継承 | No |
| パーセント値 | 一括指定が対象とする各プロパティの定義に依る |
| 計算値 | 一括指定が対象とする各プロパティの定義に依る |
| アニメーション | 計算値 |
“flex”プロパティはフレキシブルボックスレイアウトでフレックス・アイテムの主軸方向の伸長と縮小、初期寸法を指定する以下のプロパティの一括指定プロパティです。
要素がフレックス・アイテム(親要素の“display”プロパティの値が“flex”か“inline-flex”)である場合は主軸方向の寸法を決める際に“width”プロパティや“height”プロパティではなく“flex”プロパティを参照します。
要素がフレックス・アイテムでない場合は“flex”プロパティは無視されます。
サンプルコード
div { flex: 1 1 auto;}
＃
値
伸縮の詳細な指定
| 値 | 説明 |
|---|---|
| <'flex-grow'> | “flex-grow”プロパティの値 |
| <'flex-shrink'> | “flex-shrink”プロパティの値 |
| <'flex-basis'> | “flex-basis”プロパティの値 |
値はホワイトスペースで区切って、“<'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”プロパティによって決められますが、伸縮されません。) |
| 共通キーワード |
＃
使用例
＃
フレックス・アイテムの寸法を設定する
<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; /*■*/
}
黒猫
白猫
三毛猫
茶トラ猫
