Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

flex-basis

概要

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'>
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
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-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,