justify-content

/* 先頭に寄せる（初期値） */
.container { display: flex; justify-content: flex-start;}

/* 中央に寄せる */
.container-center { display: flex; justify-content: center;}

/* 末尾に寄せる */
.container-end { display: flex; justify-content: flex-end;}

/* 均等配置（両端に寄せる） */
.container-between { display: flex; justify-content: space-between;}

/* 均等配置（等間隔） */
.container-around { display: flex; justify-content: space-around;}

/* 均等配置（完全等間隔） */
.container-evenly { display: flex; justify-content: space-evenly;}

デスクトップ

Chrome

29 以降 ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

21 △

↑ prefix『-webkit-』が必要

20 以前 ×

Firefox

20 以降 ○

19 以前 ×

Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

IE

11 ○

10 ×

9 ×

8 ×

7 ×

6 ×

Opera

12.1 以降 ○

11 以前 ×

モバイル

iOS Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN / Can I Use に基づいています。

『justify-content』はFlexboxレイアウトで最も頻繁に使用されるプロパティの一つです。主軸方向（『flex-direction: row』なら横方向、『column』なら縦方向）にアイテムをどのように配置するかを制御します。

アイテムを主軸の先頭に寄せて配置します。『flex-direction: row』の場合は左寄せ、『column』の場合は上寄せになります。初期値なので、特に指定しなくてもこの動作になります。

すべてのアイテムを主軸の中央に配置します。ナビゲーションメニューの中央揃えや、要素の中央配置に頻繁に使われます。『align-items: center』と組み合わせることで上下左右の完全な中央配置が実現できます。

/* 上下左右の完全中央配置 */
.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

最初のアイテムはコンテナの先頭、最後のアイテムはコンテナの末尾に配置され、残りのアイテムは均等な間隔で配置されます。ヘッダーのロゴとナビゲーションを両端に配置する場合などに最適です。

/* ロゴを左、ナビゲーションを右に配置 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

『space-around』は各アイテムの「両側」に均等な余白を付けるため、アイテム間の間隔は両端の間隔の2倍になります。一方『space-evenly』はすべての間隔（両端を含む）を完全に等しくします。

『flex-direction: column』で『justify-content』を使う場合、コンテナに明示的な『height』が必要です。高さが指定されていないと、コンテナの高さがアイテムの合計と同じになるため、スペースを分配する余地がありません。

/* NG: heightがないので効かない */
.ng {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* OK: heightを指定すると効く */
.ok {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
}