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.
試してみましょう
構成要素のプロパティ
このプロパティは以下の 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 つの構文: 値は以下の順序でなければなりません。
flex-grow
として有効な値。flex-shrink
として有効な値。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
<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
#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
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: 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
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: 主軸方向のフレックスアイテムの比率の制御