flex

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

flexCSS一括指定プロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。

試してみましょう

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

css
/* キーワード値 */
flex: auto;
flex: initial;
flex: none;

/* 単位がない数値を 1 つ指定: flex-grow
この場合 flex-basis は 0 と等しくなる*/
flex: 2;

/* 幅または高さを 1 つ指定: flex-basis */
flex: 10em;
flex: 30%;
flex: min-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: revert;
flex: revert-layer;
flex: unset;

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

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

    • <flex-grow> として有効な値の場合、一括指定は flex: <flex-grow> 1 0 と展開されます。
    • <flex-basis> として有効な値の場合、一括指定は flex: 1 1 <flex-basis> と展開されます。
    • キーワード none またはグローバルキーワードのいずれか。
  • 値 2 つの構文:

    • 1 つ目は flex-grow として有効な値でなければなりません。

    • 2 つ目は以下のいずれかの値でなければなりません。

      • flex-shrink として有効な値の場合、一括指定は flex: <flex-grow> <flex-shrink> 0 と展開されます。
      • flex-basis として有効な値の場合、一括指定は flex: <flex-grow> 1 <flex-basis> と展開されます。
  • 値 3 つの構文: 値は以下の順序でなければなりません。

    1. flex-grow として有効な値。
    2. flex-shrink として有効な値。
    3. flex-basis として有効な値。

initial

アイテムは width および height プロパティによって寸法が決められます。コンテナーに合うように最小サイズまで収縮しますが、フレックスコンテナーの空き領域を埋めるために伸長することはありません。これは "flex: 0 1 auto" と同等です。

auto

アイテムは width および height プロパティによって寸法が決められますが、フレックスコンテナーの空き領域を埋めるために伸長したり、コンテナーに合うように最小サイズまで収縮したりします。これは "flex: 1 1 auto" と同等です。

none

アイテムは width および height プロパティによって寸法が決められます。寸法は完全に固定で、フレックスコンテナーに連動して収縮したり伸長したりすることはありません。これは"flex: 0 0 auto" と同等です。

<'flex-grow'>

フレックスアイテムの flex-grow を定義します。負の値は無効とみなされます。省略時の既定値は 1 です。 (初期値は 0)

<'flex-shrink'>

フレックスアイテムの flex-shrink を定義します。負の値は無効とみなされます。省略時の既定値は 1 です。 (初期値は 1)

<'flex-basis'>

フレックスアイテムの flex-basis を定義します。希望サイズが 0 ならば、自由度として解釈されないように単位をつけなければなりません。省略時の既定値は 0 です。 (初期値は auto)

解説

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

既定ではフレックスアイテムは内容物の最小の寸法よりも収縮することはありません。これを変更するには、 min-width または min-height を設定してください。

公式定義

初期値一括指定の次の各プロパティとして
適用対象フロー内の擬似要素を含むフレックスアイテム
継承なし
計算値一括指定の次の各プロパティとして
アニメーションの種類一括指定の次の各プロパティとして

形式文法

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

<flex-grow> =
<number [0,∞]>

<flex-shrink> =
<number [0,∞]>

<flex-basis> =
content |
<'width'>

<width> =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )

<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN

flex: auto の設定

この例では、 flex: auto を持つフレックスアイテムがコンテナー内の余白を吸収するように成長する様子を示しています。

HTML

html
<div id="flex-container">
  <div id="flex-auto">flex: auto (click to toggle raw box)</div>
  <div id="flex-initial">flex: initial</div>
</div>

CSS

css
#flex-container {
  display: flex;
  font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
  padding: 1rem;
}

#flex-auto {
  flex: auto;
  border: 1px solid #f00;
}

#flex-initial {
  border: 1px solid #000;
}

JavaScript

js
const flexAuto = document.getElementById("flex-auto");
const flexInitial = document.getElementById("flex-initial");
flexAuto.addEventListener("click", () => {
  flexInitial.style.display =
    flexInitial.style.display === "none" ? "block" : "none";
});

結果

このフレックスコンテナーには 2 つのフレックスアイテムがあります。

  • "flex: auto" は flex の値が auto です。
  • "flex: initial" は flex の値が initial です。

"flex: initial" のアイテムは、要求されるだけの幅を取りますが、それ以上空間を取るために伸長されることはありません。残りの空間はすべて "flex: auto" が占めます。

"flex: auto" をクリックすると、 "flex: initial" の display プロパティが none に設定され、レイアウトから除去されます。 "flex: auto" のアイテムが伸長され、コンテナー内で利用可能な空間をすべて占めます。

仕様書

Specification
CSS Flexible Box Layout Module Level 1
# flex-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報