display:flex;

　display:flex; は、エレメントの並びを親エレメントのサイズに合わせて表示するといった web ページのレイアウトに利用できる CSS のプロパティの設定です。エレメントは横並び、縦並びに指定することができます。

　display:flex; によるレイアウト作成方法をフレックスレイアウトなどと呼びます。他にはグリッドレイアウトと呼ばれる display:grid; による方法もあります。

　ここでは flex 値の場合のみを説明します。表示位置を指定できるgrid値もあります。grid値はエレメントのレイアウトに利用できます。

　display:flex; のみの宣言では、子要素は横に並ぶだけです。

display:flex;の例（Exampleの参照）

div{
	display: flex;
}

　写真一覧やリンクページを表示する場合などに利用できます。display:flex; はフレックスコンテナの幅に入り切らないエレメントは改行されて表示されます。

　display プロパティを利用する上で、タグエレメントによってはデフォルト設定で、改行が入るか入らないか、padding や margin の扱いに違いがあることを知っておいた方がよいでしょう。

　display プロパティについては「display プロパティ」ページを参照して下さい。

配置の基本

　display: flex; では以下のような表示基準が設けられています。この表示基準に基づき、関連プロパティによってエレメントの並び方を指定することができます。

　━━━→main axis（主軸）
┃
┃
┃
↓
cross axis
（交差軸）

　この表示基準に基づき、justify-content、align-items、flex-wrap、flex-direction プロパティによってエレメントの配置を調整することができます。

　justify-content によって主軸方向に対するエレメントの並び方を指定ことができます。右寄せ（start寄せ）、中央寄せ、左寄せ(end寄せ)、均等配置、両端寄せの均等配置ができます。
　align-itemsは、交差軸方向の子要素の位置を指定します。上揃え、中央揃え、下揃えができます。
　flex-wrap は、並びきれない子要素を折り返さないか、折り返すかです。デフォルトは折り返しません。
　flex-direction は、主軸と交差軸を代えます。必ずしも横が主軸ではありません。


align-content	フレックスラインの垂直方向の配置
align-items	初期の配置位置
align-self	フレックスアイテムの配置位置
justify-content	主軸方向での配置を指定
flex-wrap	横並びにしたフレックスアイテムの折り返し
flex-basis	フレックスアイテムの基本となる幅
flex-direction	フレックスアイテムの縦または横の並び
flex-flow	flex-direction、flex-wrapを一括指定

Example

　フレックスコンテナ（親エレメント）にflex値を指定しているだけです。 display:flex;が設定されると、その子エレメントは自動で横並びになります。

　フレックスコンテナの幅に入り切らない場合が子エレメントの幅が調整されます。flex-wrapで改行する方法もあります。子エレメントを緩やかに並べたいときに便利です。以下の例ではフレックスコンテナのサイズを変えることができます。子エレメントがどのように表示されるかを確認できます。

display:flex;

ページ内 Index

配置の基本

関連するプロパティ

Example

関連（Related）