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

justify-content プロパティ

 justify-content プロパティは、フレックスコンテナにおいて子エレメント(フレックスアイテム)の主軸方向に対しての配置を指定するプロパティです。
 配置には、右寄せ、左寄せ、中央、均等に並べるといったことができます。
 フレックスコンテナとは display:flex; が設定されたエレメントです。主軸方向はデフォルトで列(横)方向です。

フレックスアイテムを中央に表示
.contena{
	display:flex;
	justify-content: center;
}
詳しくは「Example」を参照してください

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

ページ内 Index

構文(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 の例です。色分けしたフレックスアイテムを中央に揃えています。