CSSflex-basis プロパティは、フレックスアイテムの主要部分の初期の寸法を設定します。 box-sizing で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。

メモ: (auto 以外の) flex-basiswidth (または 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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 29
完全対応 29
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 22
補足
完全対応 22
補足
補足 Since Firefox 28, multi-line flexbox is supported.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 18 — 28
無効
無効 From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 When a non-auto flex-basis is specified, Internet Explorer 10 and 11 always uses a content-box box model to calculate the size of a flex item, even if box-sizing: border-box is applied to the element. See Flexbug #7 for more info.
Opera 完全対応 12.1
完全対応 12.1
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 9
完全対応 9
完全対応 7
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 4.4
完全対応 4.4
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 29
完全対応 29
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 22
補足
完全対応 22
補足
補足 Since Firefox 28, multi-line flexbox is supported.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 18 — 28
無効
無効 From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 12.1
完全対応 12.1
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 9.2Samsung Internet Android ?
autoChrome 完全対応 21Edge 完全対応 12Firefox 完全対応 18IE 完全対応 11Opera 完全対応 12.1Safari 完全対応 7
接頭辞付き
完全対応 7
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 18Opera Android 完全対応 12.1Safari iOS ? Samsung Internet Android ?
contentChrome 未対応 なしEdge 完全対応 12Firefox 完全対応 61IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android ? Chrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 61Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

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