フレキシブル <div> 要素のアイテムの周りにスペースを作ります：
div
{
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
}
Try it Yourself ❯
justify-content プロパティは、アイテムが主軸（横）方向で使用可能なすべてのスペースを使用していない場合の、 フレキシブル・コンテナのアイテムを配列を指定します。
チップ: 交差軸（縦方向）上のアイテムの位置揃えには、align-items プロパティを使用します。
| デフォルト値： | flex-start |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 不可。animatable を参照 |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.justifyContent="space-between" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
-webkit-、-moz- の後に続く数字 は、接頭辞付きで動作した最初のバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| justify-content | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
| 値 | 説明 | Play it |
|---|---|---|
| flex-start | デフォルト値。アイテムはコンテナの始端側に寄せて配置されます | Play it ❯ |
| flex-end | アイテムはコンテナの終端側に寄せて配置されます | Play it ❯ |
| center | アイテムはコンテナの中央に寄せて配置されます | Play it ❯ |
| space-between | アイテムを均等割り付けします | Play it ❯ |
| space-around | アイテムの前後にスペースを入れて均等割り付けします | Play it ❯ |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
CSSリファレンス：align-content プロパティ
CSSリファレンス：align-items プロパティ
CSSリファレンス：align-self プロパティ
HTML DOM リファレンス：justifyContent プロパティ