概要

flex CSS プロパティは、flex アイテムが余白を埋めるように寸法を変更する度合いを指定するためのショートハンドプロパティです。flex アイテムは flex grow factor または flex shlink factor に比例して、利用可能な余白を使用してはみ出すことがないように拡張されます。

初期値以下の各プロパティのショートハンドとして補完します:
適用対象flex items, including in-flow pseudo-elements
継承不可
メディアvisual
計算値以下の各プロパティのショートハンドとして補完します:
アニメーションの可否以下の各プロパティのショートハンドとして補完します:
  • flex-grow: 可。 の値として補完しますnumber
  • flex-shrink: 可。 の値として補完しますnumber
  • flex-basis: 可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますlength または percentage, calc();
正規順序order of appearance in the formal grammar of the values

他のプロパティや詳細情報については CSS flexible box の利用 をご覧ください。

構文

/* 0 0 auto */
flex: none;

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

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

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

形式構文

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

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

#flex-container > .flex-item {
	-webkit-flex: auto;
	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 の定義
勧告候補 最初の定義

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 18.0 (18.0)[1]
20.0 (20.0)
28.0 (28.0)[2]
21.0-webkit
29.0
10.0-ms[3]
11.0[3]
12.10 6.1-webkit
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート ? 4.4 11 12.10 7.1-webkit

[1] Gecko 18.0 (Firefox 18.0 / Thunderbird 18.0 / SeaMonkey 2.15) および 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16) では、about:config の設定 layout.css.flexbox.enabled で flexbox のサポートを制御しており、既定値は false です。

[2] 複数ラインの flexbox は、Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25) からサポートしています。

[3] Internet Explorer 10-11 (Edge を除く) では、flex の構文で flex-basis の部分に calc() を使用すると無視されます。代わりにロングハンドプロパティを使用すると、この問題を回避できます。詳しくは Flexbug #8 をご覧ください。また、これらのバージョンでは flex の宣言で flex-basis の部分に単位がない値を使用すると、無効な構文として扱われます。flex ショートハンドプロパティで flex-basis の部分は常に単位を含めることにより、この問題を回避できます。詳しくは Flexbug #4 をご覧ください。

参考情報

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

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