概要
flex-basis CSS プロパティは、flex アイテムの初期 main size である flex basis を指定します。box-sizing を使用して別に指定されていない限り、このプロパティが content-box の寸法を定義します。
| 初期値 | auto |
|---|---|
| 適用対象 | flex items, including in-flow pseudo-elements |
| 継承 | 不可 |
| 相対値の基準 | refer to the flex container's inner main size |
| メディア | visual |
| 計算値 | 指定通り。ただし相対的 length は絶対的 length に変換 |
| アニメーションの可否 | 可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますlength または percentage, calc(); |
| 正規順序 | the length or percentage before the keyword, if both are present |
構文
/* 幅を指定する */ 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 item の内容物に基づいて自動設定する */ flex-basis: content; /* グローバル値 */ flex-basis: inherit; flex-basis: initial; flex-basis: unset;
値
<'width'>px、mm、ptといった絶対単位付きの数値や、親の flex コンテナの main size に対するパーセンテージで定義します。負の値は無効です。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 キーワードの追加は bug 1105111 で扱っています)。
形式構文
content | <'width'>
例
element {
flex-basis: 18em;
}
仕様書
| 仕様書 | 状況 | 備考 |
|---|---|---|
| CSS Flexible Box Layout Module The definition of 'flex-basis' in that specification. |
Last Call Working Draft | 最初の定義 |
ブラウザ実装状況
| 機能 | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 18.0 (18.0) [1] 22.0 (22.0) |
21.0-webkit | 11 [2] | 12.10 | 7.0-webkit [3] |
auto |
18.0 (18.0) |
21.0 | 11 | 12.10 | 7.0-webkit |
content |
未サポート [4] | 未サポート | 未サポート | 未サポート | 未サポート |
| 機能 | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | ? | ? | 未サポート | 12.10 | 未サポート |
[1] Firefox 18 および 19 で flexbox サポートを有効にするには、about:config の設定 "layout.css.flexbox.enabled" を true に変更します。複数ラインの flexbox は Firefox 28 からサポートしています。
[2] flex-basis に auto 以外の値を指定すると、Internet Explorer 10-11 (Edge を除く) では flex アイテムのサイズ計算で常に (要素に box-sizing: border-box を適用していても) content-box ボックスモデルを使用します。詳しくは Flexbug #7 をご覧ください。
[3] Safari 7.0 をご覧ください。
[4] バグ 1105111 をご覧ください。