flex
試してみましょう
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* キーワード値 */
flex: auto;
flex: initial;
flex: none;
/* 単位がない数値を 1 つ指定: flex-grow */
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: unset;
flex
プロパティは 1 つ、2 つ、3 つの値を取ることができます。
- 値 1 つの構文: 値は以下のうちの 1 つです。
<number>
: この場合はflex: <number> 1 0
と解釈されます。<flex-shrink>
の値は 1 と想定され、<flex-basis>
の値は0
と想定されます。- キーワード:
none
,auto
,initial
のいずれか。
- 値 2 つの構文:
- 値 3 つの構文: 値は以下の順序でなければなりません。
値
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: auto の設定
HTML
<div id="flex-container">
<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
<div class="raw-item" id="raw">Raw box</div>
</div>
CSS
#flex-container {
display: flex;
flex-direction: row;
}
#flex-container > .flex-item {
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
結果
仕様書
Specification |
---|
CSS Flexible Box Layout Module Level 1 # flex-property |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: 主軸に沿ったフレックスアイテムの比率の制御