備忘録的プログラミングリファレンス

display:flex;

 display:flex;は、子タグエレメントを横並びにするプロパティとその値です。縦に並べることもできます。
 ここではflex値の場合のみを説明します。表示位置を指定できるgrid値もあります。grid値はエレメントのレイアウトに利用できます。

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

display:flex;の例(Exampleの参照
div{
	display:flex;
}

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

 以下の関連プロパティによって並べ方を細かに設定することができます。

関連するプロパティ

 以下のような関連するプロパティがあります。

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

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

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

Example

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

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