TOP > CSSリファレンス > display:flex;

display:flex;

 displayプロパティはタグエレメントの並びを設定できるプロパティです。表示位置を指定する値grid。ある程度のコンピュータ任せにする値flexがあります。
 ここではflex値の振る舞いを確認します。display:flex;のみの宣言では、子要素は横に並ぶだけです。以下の関連プロパティによって並び方を細かに設定することができます。
 動作確認では関連プロパティが設定していますが全て初期値ですので、display:flex;のみの宣言と振る舞いを確認することができるでしょう。

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

関連プロパティについて

 display: flex;では表示基準が設けられています。この表示基準に基づいて関連プロパティを設定することができます。

 ━━━→main axis(主軸)
┃
┃
┃
↓
cross axis
(交差軸)

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

関連プロパティ

 以下の関連プロパティによって並びの設定を作ります。

関連プロパティ値(value)説明
justify-content 主軸方向の並び
align-items 交差軸方向の位置
flex-wrap 折り返し
flex-direction 主軸と交差軸を代える

動作の確認