flex
flex
は CSS の一括指定プロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
構成するプロパティ
このプロパティは以下の 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: unset;
flex
プロパティは1つ、2つ、3つの値を取ることがあります。
- 値1つの構文: 値は以下のうちの1つです。
<number>
: この場合はflex: <number> 1 0
と解釈されます。<flex-shrink>
の値は 1 と想定され、<flex-basis>
の値は0
と想定されます。- キーワード:
none
,auto
,initial
のいずれか。
- 値2つの構文:
- 1つ目は次の値でなければなりません。
<number>
であり、<flex-grow>
として解釈される。
- 2つ目は次の値でなければなりません。
<number>
:<flex-shrink>
として解釈される。width
として有効な値:<flex-basis>
として解釈される。
- 1つ目は次の値でなければなりません。
- 値3つの構文: 値は以下の順序でなければなりません。
- 最初の値は単位なしの
<number>
でなければならず、<flex-grow>
として解釈されます。 - 2つ目の値は単位なしの
<number>
でなければならず、<flex-shrink>
として解釈されます。 - 3つ目の値は
width
として有効な値でなければならず、<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
ならば、フレキシビリティとして解釈されないように単位をつけなければなりません。省略時の既定値は1
です。 (初期値は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: 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;
}
結果
仕様書
仕様書 | 状況 | 備考 |
---|---|---|
CSS Flexible Box Layout Module flex の定義 |
勧告候補 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: 主軸に沿ったフレックスアイテムの比率の制御