flex

概要

flex CSS プロパティは、flex アイテムが余白を埋めるように寸法を変更する度合いを指定するためのショートハンドプロパティです。flex アイテムは flex grow factor または flex shlink factor に比例して、利用可能な余白を使用してはみ出すことがないように拡張されます。

他のプロパティや詳細情報については CSS flexible box の利用 をご覧ください。

構文

/* 0 0 auto */
flex: none;

/* 単位がない数値を 1 つ指定: flex-grow */
flex: 2;

/* 幅または高さを 1 つ指定: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: 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-grow'>

flex アイテムの flex-grow を定義します。詳しくは <number> をご覧ください。負の値は無効とみなされます。省略時の既定値は 0 です。

<'flex-shrink'>

flex アイテムの flex-shrink を定義します。詳しくは <number> をご覧ください。負の値は無効とみなされます。省略時の既定値は 1 です。

<'flex-basis'>

flex アイテムの flex-basis を定義します。width プロパティおよび height プロパティで有効な値を受け入れます。希望サイズが 0 ならば、フレキシビリティとして解釈されないように単位をつけなければなりません。省略時の既定値は auto です。

none

このキーワードは 0 0 auto を算出します。

形式構文

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

例

#flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
}

#flex-container > .flex-item {
	-webkit-flex: auto;
	flex: auto;
}

#flex-container > .raw-item {
	width: 5rem;
}

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

var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
	raw.style.display = raw.style.display == "none" ? "block" : "none";
});

#flex-container {
	width: 100%;
	font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
	border: 1px solid #f00;
	padding: 1rem;
}

#flex-container > .raw-item {
	border: 1px solid #000;
}

結果

仕様書

ブラウザ実装状況

[1] Gecko 18.0 (Firefox 18.0 / Thunderbird 18.0 / SeaMonkey 2.15) および 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16) では、about:config の設定 layout.css.flexbox.enabled で flexbox のサポートを制御しており、既定値は false です。

[2] 複数ラインの flexbox は、Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25) からサポートしています。

[3] Internet Explorer 10-11 (Edge を除く) では、flex の構文で flex-basis の部分に calc() を使用すると無視されます。代わりにロングハンドプロパティを使用すると、この問題を回避できます。詳しくは Flexbug #8 をご覧ください。また、これらのバージョンでは flex の宣言で flex-basis の部分に単位がない値を使用すると、無効な構文として扱われます。flex ショートハンドプロパティで flex-basis の部分は常に単位を含めることにより、この問題を回避できます。詳しくは Flexbug #4 をご覧ください。

参考情報

• CSS flexible box の利用