Flex レイアウトプロパティ

最終更新：2026-09-13

flex Flex レイアウトプロパティ

flex プロパティは、CSS の Flexible Box Layout モジュールの中核となるショートハンドです。これは flex アイテムがどれだけ伸縮し、コンテナー内の残りの空間に対してどのくらいのスペースを占めるかを設定します。flex-grow・flex-shrink・flex-basis のショートハンドであり、それぞれアイテムの拡大率・縮小率・主軸方向の初期サイズを制御します。flex を使えば、等幅カラムや可変幅、流れるような配置といった一般的なレイアウトを簡単に構築できます。

カテゴリ
初期値	0 1 auto
継承	いいえ
適用対象	flex アイテム
アニメーションタイプ	length
CSS バージョン	CSS3
状態	標準

📝 構文

flex: none | auto | initial | <flex-grow> <flex-shrink>? <flex-basis>?;

⚙️ 値

値	タイプ	説明
`none \| auto \| initial`	キーワード	あらかじめ定義された flex 値。
`<flex-grow> <flex-shrink>? <flex-basis>?`	値	flex-grow／flex-shrink／flex-basis の値。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
flex	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
すべての主要ブラウザーでサポート

ヒント： flex: 1; は flex: 1 1 0% のショートハンドです。アイテムは伸縮可能で、基本サイズを 0 から始めるため、残りの空間を均等に分け合わせる定番の書き方です。

注意： flex: none; は flex: 0 0 auto と同等です。アイテムは伸縮せず、内容や明示的な width/height だけでサイズが決まります。固定幅のサイドバーやボタンに使います。

❓ よくある質問

Qflex: 1 と flex: auto の違いは？

Aflex: 1 は flex: 1 1 0% のショートハンドです。基本サイズが 0 なので、全体の幅が比例で再分配され、複数の flex: 1 アイテムは厳密に等しい幅になります。一方 flex: auto は flex: 1 1 auto のショートハンドで、各アイテムはまず内容や width からサイズが決まり、残りの空間が比例で分けられるため、内容が多いアイテムほど広くなります。等分割には flex: 1 を、内容に応じたサイズにしたい場合は flex: auto を使います。

Qflex ショートハンドを使うべきか、それとも個別のサブプロパティを使うべきですか？

A大半の場合は flex ショートハンドの方が望ましいです。なぜなら flex-grow・flex-shrink・flex-basis を 1 つの宣言で設定でき、flex-grow だけを書いたときに flex-basis がデフォルトの 0 に戻るという思わぬ挙動を防げるからです。また意図がひと目で伝わり、基本サイズが明示されるため、散らばった 3 つの宣言より確認しやすくなります。個別のサブプロパティを使うのは、メディアクエリ内で flex-basis だけを変更するといった単一プロパティの上書きが必要な場合だけです。

Qflex: 1 のアイテム内のテキストが折り返されたり潰されたりするのはなぜですか？

Aこれは flex アイテムのデフォルト min-width: auto が原因です。空間が足りなくなると、アイテムの最小サイズは内容から導かれるため、長いテキストがあるとアイテムが広がったままになり、テキストが折り返えたりあふれたりします。解決策は、アイテムに min-width: 0（column 方向なら min-height: 0）を設定し、overflow: hidden と text-overflow: ellipsis を組み合わせて 1 行の省略表示にすることです。