flex-basis

概要

flex-basis CSS プロパティは、flex アイテムの初期 main size である flex basis を指定します。box-sizing を使用して別に指定されていない限り、このプロパティが content-box の寸法を定義します。

構文

/* 幅を指定する */
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;
}

仕様書

ブラウザ実装状況

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!

[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 をご覧ください。

関連情報

• CSS flexible box の利用
• width