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

justify-contentプロパティ

 justify-contentプロパティは、display:flex;によるエレメント(フレックスコンテナ)のおいて子エレメント(フレックスアイテム)の主軸方向の並びを指定するプロパティです。主軸方向はデフォルトで列(横)方向です。

フレックスアイテムを中央に表示
display:flex;
justify-content: center;

 垂直方向の並びは、align-itemsプロパティで指定します。

関連するプロパティ

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

display:flex;複数のエレメントを緩やかに配列
align-contentフレックスラインの垂直方向の配置
align-items初期の配置位置
align-selfフレックスアイテムの配置位置
flex-wrap横並びにしたフレックスアイテムの折り返し
flex-basisフレックスアイテムの基本となる幅
flex-directionフレックスアイテムの縦または横の並び
flex-flowflex-direction、flex-wrapを一括指定

構文(Syntax)

CSS

justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.justifyContent;
値の設定
object.style.justifyContent="flex-start | flex-end | center | space-between | space-around | initial | inherit";

値(Values)

Value摘要
flex-start初期値(default値)、頭寄せ、デフォルトでは左寄せ
flex-end末寄せ、デフォルトでは右寄せ
center中央寄せ
space-between幅に対して均等に配置
space-around両端にスペースを設けて均等の配置
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)flex-start
継承(Inherited)No
CSS AnimationNo

Example

 justify-contentの例です。色分けしたフレックスアイテムを中央に揃えています。