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

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

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

プロパティについて

概要

初期値 flex-basis: auto;
適用対象 フレックス・アイテム
継承 No
パーセント値 フレックス・アイテムが内包されるフレックス・コンテナの主軸方向の内部寸法に依存
計算値 指定されたキーワード、もしくは算出された<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”とすると同じ効果を得ることができます。

仕様書

定義されている仕様書
Level 1
作業草稿(WD)
flex-basis
定義あり
Level 1
勧告候補(CR)
auto
定義あり
content
定義あり
<'width'>
定義あり

使用例

初期寸法を自動で決める

.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>

黒猫

白猫

三毛猫

茶トラ猫

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