CSS の flex-basis
プロパティは、フレックスアイテムの主要部分の初期の寸法を設定します。 box-sizing
で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
メモ: (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;
flex-basis
プロパティは、content
キーワードまたは <'width'>
で指定します。
値
<'width'>
- 絶対的な
<length>
、親のフレックスコンテナーの main size に対する<percentage>
、あるいはauto
キーワードで定義します。負の値は不正です。 content
- flex アイテムの内容物に基づいて、自動的にサイズを決めます。
-
メモ: この値は Flexible Box Layout の初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。 main size (width または height) を
auto
にするのと合わせてauto
を使用することで、同等の効果を得られます。経緯:
- 元々、
flex-basis:auto
は "自身のwidth
またはheight
プロパティを参照する" ことを意味していました。 - その後
flex-basis:auto
の意味が自動サイズ設定に変わり、また "自身のwidth
またはheight
プロパティを参照する" キーワードとして "main-size" を導入しました。これは bug 1032922 で実装しました。 - さらに、この変更が bug 1093316 で戻されて
auto
が再び "自身のwidth
またはheight
プロパティを参照する" になり、自動サイズ設定を行うためのcontent
キーワードを新たに導入しました (content キーワードの追加は バグ 1105111 で扱っています)。
- 元々、
形式文法
content | <'width'>
例
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: 20px; 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: 18px; } .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 の定義 |
勧告候補 | 初回定義 |
初期値 | auto |
---|---|
適用対象 | フロー内の疑似要素を含むフレックスアイテム |
継承 | なし |
パーセンテージ | refer to the flex container's inner main size |
メディア | 視覚 |
計算値 | 指定通り。ただし相対的 length は絶対的 length に変換 |
アニメーションの種類 | length または percentage, calc(); |
正規順序 | the length or percentage before the keyword, if both are present |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-basis | Chrome
完全対応
29
| Edge
完全対応
12
| Firefox
完全対応
22
| IE
完全対応
11
| Opera
完全対応
12.1
| Safari
完全対応
9
| WebView Android
完全対応
4.4
| Chrome Android
完全対応
29
| Firefox Android
完全対応
22
| Opera Android
完全対応
12.1
| Safari iOS
完全対応
9
| Samsung Internet Android ? |
auto | Chrome 完全対応 21 | Edge 完全対応 12 | Firefox 完全対応 18 | IE 完全対応 11 | Opera 完全対応 12.1 | Safari
完全対応
7
| WebView Android 完全対応 ≤37 | Chrome Android 完全対応 25 | Firefox Android 完全対応 18 | Opera Android 完全対応 12.1 | Safari iOS
完全対応
7
| Samsung Internet Android ? |
content | Chrome 未対応 なし | Edge 完全対応 12 | Firefox 完全対応 61 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 61 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
max-content | Chrome 未対応 なし | Edge 未対応 なし | Firefox
完全対応
66
| IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android
完全対応
66
| Opera Android ? | Safari iOS 未対応 なし | Samsung Internet Android ? |
min-content | Chrome 未対応 なし | Edge 未対応 なし | Firefox
完全対応
66
| IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android
完全対応
66
| Opera Android ? | Safari iOS 未対応 なし | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: 主軸に沿ったフレックスアイテムの比率の制御
width