flex-basis CSS プロパティは、flex アイテムの初期 main size を指定します。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;

flex-basis プロパティは、content キーワードまたは <'width'> で指定します。

<'width'>
絶対的な <length>、親の flex コンテナーの 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
適用対象flex items, including in-flow pseudo-elements
継承なし
パーセンテージrefer to the flex container's inner main size
メディアvisual
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの種類length または percentage, calc();
正規順序the length or percentage before the keyword, if both are present

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

29

21 -webkit-

12

12 -webkit-

221

49 -webkit-

44 -webkit- 2

18 — 283

114

12.1

15 -webkit-

9

7 -webkit-

auto2112181112.17 -webkit-
content なし1261 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

29

21 -webkit-

29

21 -webkit-

あり

あり -webkit-

221

49 -webkit-

44 -webkit- 2

18 — 283

12.1

15 -webkit-

9.2 ?
auto ? ? あり1812.1 ? ?
content ? なし あり61 なし なし なし

1. Since Firefox 28, multi-line flexbox is supported.

2. 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.

3. 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.

4. 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.

関連情報

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

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