CSS フレックスボックスレイアウト

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

基本的な例

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

リファレンス

プロパティ

配置プロパティ

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

ガイド

フレックスボックスの基本概念

フレックスボックスの機能の概要

フレックスボックスと他のレイアウト方法の関係

フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているか

フレックスコンテナー内のアイテムの配置

ボックス配置プロパティがどのようにフレックスボックスに働くか

フレックスアイテムの順序

アイテムの順序や向きを変更する様々な方法を説明し、その上での潜在的な問題を紹介します。

主軸方向のフレックスアイテムの比率の制御

flex-grow, flex-shrink, flex-basis の各プロパティについての説明です。

フレックスアイテムの折り返しをマスターする

複数行のフレックスコンテナーを作成する方法と、それらの行内でのアイテムの表示方法の制御。

フレックスボックスの典型的な用途

典型的なフレックスボックスの用途の一般的なデザインパターン。

仕様書

Specification
CSS Flexible Box Layout Module Level 1

関連情報