CSS Flexible Box Layout は、ユーザーインターフェースのデザイン及び 1 次元のアイテムのレイアウトに最適化された、CSS のボックスモデルを定義する CSS モジュールです。flex レイアウトモデルでは、flex コンテナの子を任意の方向にレイアウトすることや、使われていない空間を埋めるために伸長したり、あるいは親のオーバーフローを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。

基本的な例

以下の例では、コンテナが display: flex; に設定されており、3 つの子が flex アイテムであることを意味しています。justify-content の値は、主軸上に均等に配置するため、space-between に設定されています。左右のアイテムが flex コンテナの端をぴったり埋め尽くすようにして、どのアイテム間にも等しい量の空間が設けられています。また、align-items の初期値である stretch により、アイテムが交差軸に伸長していることが確認できます。アイテムは flex コンテナの高さまで伸長し、最も高いアイテムと同じ高さで表示されます。

 

リファレンス

 

CSS プロパティ

ガイド

 

Flexbox の基本コンセプト
flexbox の機能の概要
Flexbox と他のレイアウト方法の関係
flexbox が他のレイアウト方法や CSS 仕様とどのように関係しているか
Flex コンテナにおけるアイテムの位置合わせ
ボックスの整列プロパティがどのように flexbox にはたらいているか
flex アイテムの順序
アイテムの順序や方向を変更する異なる方法の説明と、その潜在的な問題。
主軸における flex アイテムの比率の操作
この記事では flex-grow、flex-shrink、flex-basis プロパティについて説明します。
flex アイテムのラッピングをマスターする
どのように複数行の flex コンテナを作り、各行でアイテムの表示を操作するか。
典型的な flexbox の用途
典型的な flexbox な用途の一般的なデザインパターン。
Flexbox の後方互換性
flexbox のブラウザの状態、相互運用性の問題、古いブラウザや仕様のサポート

 

仕様

仕様書 状況 備考
CSS Flexible Box Layout Module 勧告候補 策定の初期段階

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 20.0 (20.0) 21.0-webkit
29.0
10.0-ms
11.0
12.10 6.1-webkit
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート (有) 4.4 11 12.10 7.1-webkit

 

参考

Flexbugs
コミュニティによって整理されている flexbox 関連のブラウザーのバグとワークアラウンドの一覧
Cross-browser Flexbox mixins
この記事では、最近の flexbox 構文をサポートしていない古いブラウザーでも動作するようなクロスブラウザーの flexbox エクスペリエンスを作りたい人のために、mixin の一式を提供します。

ドキュメントのタグと貢献者

このページの貢献者: dynamis, reppets, sii, hashedhyphen, fscholz
最終更新者: dynamis,