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

* Learn more
* See full compatibility
* Report feedback
**`flex`** は CSS の一括指定プロパティで、フレックス*アイテム*をフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。

試してみましょう
--------

構成要素のプロパティ
----------

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

* `flex-grow`
* `flex-shrink`
* `flex-basis`
構文
--


```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`, または単位のない正の数を設定します。これらの値の効果を確認するには、以下のフレックスコンテナーの大きさを変更してみてください。
```

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item initial">initial</div>
  <div class="item initial">initial</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item initial">initial</div>
  <div class="item none">none</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item four">4</div>
  <div class="item two">2</div>
  <div class="item one">1</div>
</div>
```


```
\* {
  box-sizing: border-box;
}

.flex-container {
  background-color: #f4f7f8;
  resize: horizontal;
  overflow: hidden;
  display: flex;
  margin: 1em;
}

.item {
  margin: 1em;
  padding: 0.5em;
  width: 110px;
  min-width: 0;
  background-color: #1b5385;
  color: white;
  font-family: monospace;
  font-size: 13px;
}

.initial {
  flex: initial;
}

.auto {
  flex: auto;
}

.none {
  flex: none;
}

.four {
  flex: 4;
}

.two {
  flex: 2;
}

.one {
  flex: 1;
}
```


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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `flex-grow`: `0`
* `flex-shrink`: `1`
* `flex-basis`: `auto`
 |
| 適用対象 | フロー内の擬似要素を含むフレックスアイテム |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `flex-grow`: 指定通り
* `flex-shrink`: 指定通り
* `flex-basis`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `flex-grow`: 数値
* `flex-shrink`: 数値
* `flex-basis`: length または パーセント値, calc();
 |

形式文法
----
```

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

例
-

### 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 with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *主軸方向のフレックスアイテムの比率の制御*