flex-basis
flex-basis
は CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 box-sizing
で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
メモ: (auto
以外の) flex-basis
と width
(または flex-direction: column
の場合は height
) の両方が要素に設定されていた場合、 flex-basis
が優先されます。
構文
/* 幅を指定する */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;
/* 固有のサイズ指定キーワード */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* フレックスアイテムの内容物に基づいて自動設定する */
flex-basis: content;
/* グローバル値 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
値
<'width'>
- 絶対的な
<length>
、親のフレックスコンテナーの main size に対する<percentage>
、あるいはauto
キーワードで定義します。負の値は不正です。既定値はauto
です。 content
- flex アイテムの内容物に基づいて、自動的にサイズを決めます。
-
メモ: この値は Flexible Box Layout の初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。 main size (width または height) を
auto
にするのと合わせてauto
を使用することで、同等の効果を得られます。経緯:
- 元々、
flex-basis:auto
は "自身のwidth
またはheight
プロパティを参照する" ことを意味していました。 - その後
flex-basis:auto
の意味が自動サイズ設定に変わり、また "自身のwidth
またはheight
プロパティを参照する" キーワードとして "main-size" を導入しました。これは バグ 1032922 で実装しました。 - さらに、この変更が バグ 1093316 で戻されて
auto
が再び "自身のwidth
またはheight
プロパティを参照する" になり、自動サイズ設定を行うためのcontent
キーワードを新たに導入しました (content キーワードの追加は バグ 1105111 で扱っています)。
- 元々、
公式定義
初期値 | auto |
---|---|
適用対象 | フロー内の擬似要素を含むフレックスアイテム |
継承 | なし |
パーセント値 | フレックスコンテナーの内部の主要な寸法に対する相対値 |
計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
アニメーションの種類 | length または パーセント値, calc(); |
形式文法
例
フレックスアイテムの初期の寸法の設定
HTML
<ul class="container">
<li class="flex flex1">1: flex-basis test</li>
<li class="flex flex2">2: flex-basis test</li>
<li class="flex flex3">3: flex-basis test</li>
<li class="flex flex4">4: flex-basis test</li>
<li class="flex flex5">5: flex-basis test</li>
</ul>
<ul class="container">
<li class="flex flex6">6: flex-basis test</li>
</ul>
CSS
.container {
font-family: arial, sans-serif;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.flex {
background: #6AB6D8;
padding: 10px;
margin-bottom: 50px;
border: 3px solid #2E86BB;
color: white;
font-size: 14px;
text-align: center;
position: relative;
}
.flex:after {
position: absolute;
z-index: 1;
left: 0;
top: 100%;
margin-top: 10px;
width: 100%;
color: #333;
font-size: 12px;
}
.flex1 {
flex-basis: auto;
}
.flex1:after {
content: 'auto';
}
.flex2 {
flex-basis: max-content;
}
.flex2:after {
content: 'max-content';
}
.flex3 {
flex-basis: min-content;
}
.flex3:after {
content: 'min-content';
}
.flex4 {
flex-basis: fit-content;
}
.flex4:after {
content: 'fit-content';
}
.flex5 {
flex-basis: content;
}
.flex5:after {
content: 'content';
}
.flex6 {
flex-basis: fill;
}
.flex6:after {
content: 'fill';
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Flexible Box Layout Module flex-basis の定義 |
勧告候補 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: フレックスアイテムの主軸方向における比率の制御
width