CSS フレックスボックスレイアウト
CSS フレックスボックスレイアウト (CSS flexible box layout) は、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。
フレックスボックスレイアウトの実際
以下の例では、コンテナーに display: flex に設定されており、 3 つの子がフレックスアイテムであることを意味しています。 justify-content の値は、主軸上に均等に配置するため、 space-between に設定されています。それぞれのアイテムと、その左右のアイテムとの間は等しい間隔で配置され、フレックスコンテナーの両端に揃えられます。また、 align-items の既定値は stretch なので、アイテムが交差軸方向に引き伸ばされていることが分かります。アイテムはフレックスコンテナーの高さまで引き伸ばされ、最も高さが大きいアイテムと同じ高さで表示されます。
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three <br />には追加の<br />テキストが<br />あります</div>
</div>
body {
font-family: sans-serif;
}
.box {
border: 2px dotted rgb(96 139 168);
display: flex;
justify-content: space-between;
}
.box > * {
border: 2px solid rgb(96 139 168);
border-radius: 5px;
background-color: rgb(96 139 168 / 0.2);
padding: 1em;
}
リファレンス
プロパティ
用語集の用語
ガイド
- フレックスボックスの基本概念
-
フレックスボックスの機能の概要です。
- フレックスボックスと他のレイアウト方法の関係
-
フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているかです。
- フレックスコンテナー内のアイテムの配置
-
ボックス配置プロパティがどのようにフレックスボックスに働くかです。
- フレックスアイテムの順序
-
アイテムの順序や向きを変更する様々な方法を説明し、その上での潜在的な問題を紹介します。
- 主軸方向のフレックスアイテムの比率の制御
-
flex-grow, flex-shrink, flex-basis の各プロパティについての説明です。
- フレックスアイテムの折り返しをマスターする
-
複数行のフレックスコンテナーを作成する方法と、それらの行内でのアイテムの表示方法の制御。
- フレックスボックスの典型的な用途
-
典型的なフレックスボックスの用途の一般的なデザインパターン。
- CSS レイアウト: フレックスボックス
-
フレックスボックスレイアウトを使用してウェブレイアウトを作成する方法を学びます。
- フレックスボックスのボックス配置
-
CSS ボックス配置の詳細機能のうち、フレックスボックスに特有のものです。
関連概念
仕様書
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 |