display:flex;
display:flex; は、エレメントの並びを親エレメントのサイズに合わせて表示するといった web ページのレイアウトに利用できる CSS のプロパティの設定です。
エレメントは横並び、縦並びに指定することができます。
ここでは flex 値の場合のみを説明します。表示位置を指定できるgrid値もあります。grid値はエレメントのレイアウトに利用できます。
display:flex; のみの宣言では、子要素は横に並ぶだけです。
div{
display: flex;
}
写真一覧やリンクページを表示する場合などに利用できます。display:flex; はフレックスコンテナの幅に入り切らないエレメントは改行されて表示されます。
display プロパティを利用する上で、タグエレメントによってはデフォルト設定で、改行が入るか入らないか、padding や margin の扱いに違いがあることを知っておいた方がよいでしょう。
display プロパティについては「display プロパティ」ページを参照して下さい。
ページ内 Index
配置の基本
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で改行する方法もあります。子エレメントを緩やかに並べたいときに便利です。 以下の例ではフレックスコンテナのサイズを変えることができます。子エレメントがどのように表示されるかを確認できます。