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

交差軸方向の並びの調整は、align-itemsプロパティで指定します。
ページ内 Index
- ad -
構文(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 Animation | No |
Example
justify-content の例です。色分けしたフレックスアイテムを中央に揃えています。
flex-wrap: wrap; は横並びにしたフレックスアイテムを折り返す指定です。憶えで記載してあります。
- ad -
関連する CSS プロパティ
justify-content プロパティには、以下のような関連するプロパティがあります。
display:flex; | 複数のエレメントを緩やかに配列 |
align-content | フレックスラインの垂直方向の配置 |
align-items | 初期の配置位置 |
align-self | フレックスアイテムの配置位置 |
justify-content | 主軸方向での配置を指定 |
flex-wrap | 横並びにしたフレックスアイテムの折り返し |
flex-basis | フレックスアイテムの基本となる幅 |
flex-direction | フレックスアイテムの縦または横の並び |
flex-flow | flex-direction、flex-wrapを一括指定 |