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

CSSflex プロパティは、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。これは flex-grow, flex-shrink, flex-basis を設定する一括指定プロパティです。

多くの場合、 flex には autoinitialnone、 または単位のない正の数を設定してください。これらの値の効果を確認するには、以下のフレックスコンテナーの大きさを変更してみてください。

auto
項目は width および height プロパティによって大きさが決められますが、フレックスコンテナーの空き領域を埋めるために伸長したり、コンテナーに合うように最小サイズまで収縮したりします。これは "flex: 1 1 auto" と同等です。
initial
これが既定値です。項目は width および height プロパティによって大きさが決められます。コンテナーに合うように最小サイズまで収縮しますが、フレックスコンテナーの空き領域を埋めるために伸長することはありません。これは "flex: 0 1 auto" と同等です。
none
項目は width および height プロパティによって大きさが決められます。大きさは完全に固定で、フレックスコンテナーに関連して収縮したり伸長したりすることはありません。これは"flex: 0 0 auto" と同等です。
<positive-number>
項目はコンテナーの空き領域に対して指定された割合が割り当てられます。これは "flex: <正の数> 1 0" と同等です。

既定ではフレックスの項目は最小コンテンツサイズよりも収縮することはありません。これを変更するには、 min-width または min-height を設定してください。

構文

/* 基本の値 */
flex: auto;
flex: initial;
flex: none;
flex: 2;

/* 単位がない数値を1つ指定: flex-grow */
flex: 2;

/* 幅または高さを1つ指定: flex-basis */
flex: 10em;
flex: 30px;

/* 値を2つ指定: flex-grow | flex-basis */
flex: 1 30px;

/* 値を2つ指定: flex-grow | flex-shrink */
flex: 2 2;

/* 値を3つ指定: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* グローバル値 */
flex: inherit;
flex: initial;
flex: unset;

flex プロパティは1つ、2つ、3つの値を取ることがあります。

値1つの構文: 値は以下のうちの1つです。

  • 単位なしの 数値: <flex-grow> として解釈されます。
  • width として有効な値: <flex-basis> として解釈されます。
  • none, auto, initial のキーワード値のいずれか。

値2つの構文: 最初の値は単位なしの <number> でなければならず、 <flex-grow> として解釈されます。2つ目の値は以下のうちの1つです。

値3つの構文:

  • 最初の値は単位なしの <number> でなければならず、 <flex-grow> として解釈されます。
  • 2つ目の値は単位なしの <number> でなければならず、 <flex-shrink> として解釈されます。
  • 3つ目の値は width として有効な値でなければならず、 <flex-basis> として解釈されます。

<'flex-grow'>
フレックスアイテムの flex-grow を定義します。詳しくは <number> をご覧ください。負の値は無効とみなされます。省略時の既定値は 0 です。
<'flex-shrink'>
フレックスアイテムの flex-shrink を定義します。詳しくは <number> をご覧ください。負の値は無効とみなされます。省略時の既定値は 1 です。
<'flex-basis'>
フレックスアイテムの flex-basis を定義します。width プロパティおよび height プロパティで有効な値を受け入れます。希望サイズが 0 ならば、フレキシビリティとして解釈されないように単位をつけなければなりません。省略時の既定値は 0 です。
none
このキーワードは 0 0 auto を算出します。

1つまたは2つの単位なしの値を使用した場合、 flex-basis は auto から 0 に変更されます。詳しくは Flexible Box Layout Module のドラフト版を参照してください。

形式構文

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container > .flex-item {
  flex: auto;
}

#flex-container > .raw-item {
  width: 5rem;
}
<div id="flex-container">
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>

結果

仕様書

仕様書 状況 備考
CSS Flexible Box Layout Module
flex の定義
勧告候補 初回定義

初期値以下の一括指定の各プロパティとして
適用対象flex items, including in-flow pseudo-elements
継承不可
メディアvisual
計算値以下の一括指定の各プロパティとして
アニメーションの種類以下の一括指定の各プロパティとして
正規順序形式文法における値の出現順

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

29

21 -webkit-

12

12 -webkit-

201 2

49 -webkit-

44 -webkit- 3

18 — 284

115 6

10 -ms- 7 8

12.1

9

6.1 -webkit-

機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

29

21 -webkit-

29

21 -webkit-

あり

あり -webkit-

?12.1

あり

7.1 -webkit-

?

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

2. Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.

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

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

5. Internet Explorer 11 ignores uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info.

6. Internet Explorer 11 considers a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.

7. Internet Explorer 10 and 11 ignore uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info.

8. Internet Explorer 10 and 11 consider a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.

関連情報

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

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