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.
試してみましょう
flex: 1;
flex: 2;
flex: 1 30px;
flex: 1 1 100px;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">Change me</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: rgba(0, 0, 255, 0.2);
border: 3px solid blue;
margin: 10px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
#example-element {
background-color: rgba(255, 0, 200, 0.2);
border: 3px solid rebeccapurple;
}
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* キーワード値 */
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 つの構文: 値は以下の順序でなければなりません。
flex-growとして有効な値。flex-shrinkとして有効な値。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, または単位のない正の数を設定します。これらの値の効果を確認するには、以下のフレックスコンテナーの大きさを変更してみてください。
既定ではフレックスアイテムは内容物の最小の寸法よりも収縮することはありません。これを変更するには、 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
<div id="flex-container">
<div id="flex-auto">
flex: auto （クリックで `flex: initial` ボックスを削除/追加）
</div>
<div id="default">flex: initial</div>
</div>
CSS
#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 アイテムがコンテナー内に再び追加されます。
仕様書
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-property |