We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

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 に変換
Animation typelength または 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'>
pxmmpt といった絶対単位付きの数値や、親の 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
flex-basis の定義
勧告候補 最初の定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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-basisauto 以外の値を指定すると、Internet Explorer 10-11 (Edge を除く) では flex アイテムのサイズ計算で常に (要素に box-sizing: border-box を適用していても) content-box ボックスモデルを使用します。詳しくは Flexbug #7 をご覧ください。

[3] Safari 7.0 をご覧ください。

[4] バグ 1105111 をご覧ください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: yyss, fscholz, teoli, ethertank
最終更新者: yyss,