Mar. 23rd,2021
プロパティについて
＃
概要
| 初期値 | “flex-basis: auto;” |
| 適用対象 | フレックス・アイテム |
| 継承 | No |
| パーセント値 | フレックス・アイテムが内包されるフレックス・コンテナの主軸方向の内部寸法を“100%”とする |
| 計算値 | 指定されたキーワード、もしくは算出された“<length-percentage>”値 |
| アニメーション | 計算値 |
“flex-basis”プロパティはフレキシブルボックスレイアウトでフレックス・アイテムの主軸方向の初期寸法を指定するプロパティです。
“flex-basis”プロパティは“flex-grow”プロパティや“flex-shrink”プロパティによる指定でフレックス・アイテムが伸縮される前の初期寸法を指定します。
“flex-basis”プロパティと“width”プロパティ、もしくは“height”プロパティが競合する場合には“flex-basis”プロパティが優先されます。
“flex-basis”プロパティは既定ではコンテント・ボックスの寸法を指定しますが、“box-sizing”プロパティで変更できます。
サンプルコード
div { flex-basis: 100px;}
＃
値
| 値 | 説明 |
|---|---|
| auto | フレックス・アイテムの“width”プロパティと“height”プロパティの値のうち主軸方向の寸法の値を使用する (該当するプロパティの値も“auto”である場合は“content”とみなされます。) |
| content | フレックス・アイテムのコンテンツに基づいて自動で寸法を決めます (“width”プロパティや“height”プロパティの値を“max-content”とした場合とほぼ同じです。) |
| <'width'> | “width”プロパティと“height”プロパティの値 |
| 共通キーワード |
“content”は初期のバージョンの仕様書では定義されていなかったため、ブラウザによってはこの値に対応していない可能性があります。“width”プロパティと“height”プロパティの値のうち主軸方向の寸法の値を“auto”としたうえで“flex-basis”プロパティの値も“auto”とすると同じ効果を得ることができます。
＃
使用例
＃
初期寸法を自動で決める
.flex-contain {
display: flex;
}
.item-1 {
flex-basis: auto;
width: 10%;
background-color: #d396a6; /*■*/
}
.item-2 {
flex-basis: auto;
width: 20%;
background-color: #be96d3; /*■*/
}
.item-3 {
flex-basis: auto;
width: 30%;
background-color: #27b6d3; /*■*/
}
.item-4 {
flex-basis: auto;
width: 40%;
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-basis: content;
background-color: #d396a6; /*■*/
}
.item-2 {
flex-basis: content;
background-color: #be96d3; /*■*/
}
.item-3 {
flex-basis: content;
background-color: #27b6d3; /*■*/
}
.item-4 {
flex-basis: content;
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>
黒猫
白猫
三毛猫
茶トラ猫
＃
初期寸法を“<'width'>”値で指定する
.flex-contain {
display: flex;
}
.item-1 {
flex-basis: 10%;
background-color: #d396a6; /*■*/
}
.item-2 {
flex-basis: 20%;
background-color: #be96d3; /*■*/
}
.item-3 {
flex-basis: 30%;
background-color: #27b6d3; /*■*/
}
.item-4 {
flex-basis: 40%;
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>
黒猫
白猫
三毛猫
茶トラ猫
