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

基本的な例

以下の例では、コンテナーに display: flex に設定されており、 3 つの子がフレックスアイテムであることを意味しています。 justify-content の値は、主軸上に均等に配置するため、 space-between に設定されています。それぞれのアイテムと、その左右のアイテムとの間は等しい間隔で配置され、フレックスコンテナーの両端に揃えられます。また、 align-items の既定値は stretch なので、アイテムが交差軸方向に引き伸ばされていることが分かります。アイテムはフレックスコンテナーの高さまで引き伸ばされ、最も高さが大きいアイテムと同じ高さで表示されます。

リファレンス

CSS プロパティ

配置プロパティ

align-content, align-self, align-items, justify-content の各プロパティは、当初はフレックスボックスの仕様書にありましたが、ボックス配置の仕様書で定義されるようになり、フレックスボックスの仕様書はボックス配置の最新の定義を参照するようになりました。ボックス配置では新しい配置プロパティも定義されています。

用語集の項目

ガイド

フレックスボックスの基本概念
フレックスボックスの機能の概要
フレックスボックスと他のレイアウト方法の関係
フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているか
フレックスコンテナーにおけるアイテムの配置
ボックス配置プロパティがそのようにフレックスボックスに働くか
フレックスアイテムの順序
アイテムの順序や向きを変更する様々な方法を説明し、その上での潜在的な問題を紹介します。
主軸に沿ったフレックスアイテムの比率の操作
この記事では flex-grow, flex-shrink, flex-basis の各プロパティについて説明します。
フレックスアイテムの折り返しのマスター
複数行のフレックスコンテナーを作成する方法と、それらの行内でのアイテムの表示方法の制御。
典型的なフレックスボックスの用途
典型的なフレックスボックスの用途の一般的なデザインパターン。
フレックスボックスの後方互換性
フレックスボックスのブラウザーの対応状況、相互運用性の問題、古いブラウザーと古い仕様書のバージョンの対応

仕様書

仕様書 状態 備考
CSS Flexible Box Layout Module 勧告候補 初回定義

ブラウザーの対応

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

機能 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
コミュニティによって整理されているフレックスボックスに関するブラウザーのバグと回避方法の一覧
ブラウザーに依存しないフレックスボックスのミックスイン
この記事では、最近のフレックスボックス構文に対応していない古いブラウザーでも動作するような、ブラウザーに依存しないフレックスボックスの操作を作りたい人のために、ミックスインの一式を提供します。

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

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