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

試してみましょう

flex: 1;

flex: 2;

flex: 1 30px;

flex: 1 1 100px;

<section>  <div>ここが変わります</div>  <div>flex: 1</div>  <div>flex: 1</div></section>

.default-example {  border: 1px solid #c5c5c5;  width: auto;  max-height: 300px;  display: flex;}.default-example > div {  background-color: rgb(0 0 255 / 0.2);  border: 3px solid blue;  margin: 10px;  flex-grow: 1;  flex-shrink: 1;  flex-basis: 0;}#example-element {  background-color: rgb(255 0 200 / 0.2);  border: 3px solid rebeccapurple;}

構成要素のプロパティ

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

• flex-grow
• flex-shrink
• flex-basis

構文

/* キーワード値 */flex: none; /* 0 0 auto *//* 単位がない数値を 1 つ指定: flex-growこの場合 flex-basis は 0 と等しくなる*/flex: 2; /* 2 1 0% *//* 幅または高さを 1 つ指定: flex-basis */flex: auto; /* 1 1 auto */flex: 10em; /* 1 1 10em */flex: 30%;flex: min-content;/* 値を 2 つ指定: flex-grow | flex-basis */flex: 1 30px; /* 1 1 30px *//* 値を 2 つ指定: flex-grow | flex-shrink */flex: 2 2; /* 2 2 0% *//* 値を 3 つ指定: flex-grow | flex-shrink | flex-basis */flex: 2 2 10%;/* グローバル値 */flex: inherit;flex: initial; /* 0 1 auto */flex: revert;flex: revert-layer;flex: unset;

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

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

  • <flex-grow> として有効な値の場合、すべてのブラウザーで、この一括指定はflex: <flex-grow> 1 0% と展開されます。ただし、仕様書では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 として有効な値。

値

<'flex-grow'>

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

<'flex-shrink'>

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

<'flex-basis'>

フレックスアイテムのflex-basis を定義します。省略時の既定値は0% です。初期値はauto です。

none

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

一般的に望まれるフレックスボックスの効果は、次のflex 値を使用して実現できます。

• initial: フレックスアイテムは伸長しませんが、縮小することができます。これが既定値ではflex: 0 1 auto に展開されます。アイテムのサイズは、flex-direction に応じて、width またはheight プロパティに従います。負の空白がある場合、アイテムはコンテナー内に収まるように最小サイズまで縮小しますが、フレックスコンテナー内で正の値があってもそれを吸収するために伸長することはありません。

• auto: フレックスアイテムは伸長したり縮小したりします。この値はflex: 1 1 auto に展開されます。アイテムは、flex-direction に応じて、そのwidth またはheight プロパティに従ってサイズ指定されますが、フレックスコンテナー内で利用できる正の値を吸収するために伸長したり、負の値の場合はコンテナーに合わせて最小サイズまで縮小します。フレックスアイテムは完全に伸縮自在です。

• none: フレックスアイテムは伸長も縮小もしません。この値はflex: 0 0 auto に展開されます。アイテムは、フレックスコンテナーの方向に応じて、width またはheight プロパティに従ってサイズ調整されます。フレックスアイテムは完全に柔軟性がありません。

• flex: <number [1,∞]>: フレックスアイテムの主要サイズは設定した数値に比例します。この値はflex: <number> 1 0 に展開されます。これはflex-basis をゼロに設定し、フレックスアイテムを伸縮自在にします。このアイテムは最小の寸法と同じ幅または高さになり、コンテナー内で利用できる正の値は、このアイテムと兄弟フレックスアイテムの成長係数に基づいて比例配分されます。すべてのフレックスアイテムがこのパターンを使用する場合、すべてのアイテムはその数値に比例したサイズになります。

  警告:ブラウザーはflex 値でflex-basis が指定されていない場合、flex-basis 値に0% を使用します。これは仕様で言われているflex-basis 値の0 とは異なります。これはフレックスレイアウトに影響を与える場合があります。この効果をflex-basis の 0 と 0% の違いの例で確認してください。

解説

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

<div>  <div>auto</div>  <div>auto</div>  <div>auto</div></div><div>  <div>auto</div>  <div>initial</div>  <div>initial</div></div><div>  <div>auto</div>  <div>auto</div>  <div>none</div></div><div>  <div>initial</div>  <div>none</div>  <div>none</div></div><div>  <div>4</div>  <div>2</div>  <div>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 =
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()>|
stretch|
fit-content|
contain

<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> =
<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

<div>  <div>    flex: auto （クリックで `flex: initial` ボックスを削除/追加）  </div>  <div>flex: initial</div></div>

CSS

body * {  padding: 1rem;  user-select: none;  box-sizing: border-box;  font-family: "Consolas", "Arial", sans-serif;}

#flex-container {  border: 2px dashed gray;  display: flex;}#flex-auto {  cursor: pointer;  background-color: wheat;  flex: auto;}#default {  background-color: lightblue;}

JavaScript

const flexAutoItem = document.getElementById("flex-auto");const defaultItem = document.getElementById("default");flexAutoItem.addEventListener("click", () => {  defaultItem.style.display =    defaultItem.style.display === "none" ? "block" : "none";});

結果

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

• #flex-auto のアイテムはflex 値がauto です。auto 値は1 1 auto に展開され、つまりアイテムは拡大が許可されます。
• #default アイテムにはflex 値が設定されていないので、デフォルト値としてinitial 値が設定されます。initial 値は0 1 auto に展開され、アイテムは拡大されません。

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

#flex-auto アイテムをクリックすると、#default アイテムのdisplay プロパティがnone に設定され、レイアウトから除去されます。すると、#flex-auto アイテムがコンテナー内で利用できる空間をすべて占めるように展開されます。もう一度#flex-auto アイテムをクリックすると、#default アイテムがコンテナー内に再び追加されます。

仕様書

ブラウザーの互換性

関連情報

• フレックスボックスの基本概念
• 主軸方向のフレックスアイテムの比率の制御
• CSS フレックスボックスレイアウトモジュール