CSS 參考手冊
在彈性盒對象的 <div> 元素中的各項周圍留有空白：
div
{
display: flex;
justify-content: space-around;
}
表格中的數字表示支援該屬性的第一個浏覽器的版本号。
緊跟在 -webkit-, -ms- 或 -moz- 後的數字為支援該字首屬性的第一個版本。
屬性
justify-content
29.0
21.0 -webkit-
11.0
28.0
18.0 -moz-
9.0
6.1 -webkit-
17.0
justify-content 用于設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
提示：使用 align-content 屬性對齊交叉軸上的各項（垂直）。
預設值：
flex-start
繼承：
否
可動畫化：
否。請參閱 可動畫化（animatable）。
版本：
CSS3
JavaScript 文法：
object.style.justifyContent="space-between"
嘗試一下
/* 對齊方式 */
justify-content: center; /* 居中排列 */
justify-content: start; /* 從行首開始排列 */
justify-content: end; /* 從行尾開始排列 */
justify-content: flex-start; /* 從行首起始位置開始排列 */
justify-content: flex-end; /* 從行尾位置開始排列 */
justify-content: left; /* 一個挨一個在對齊容器得左邊緣 */
justify-content: right; /* 元素以容器右邊緣為基準，一個挨着一個對齊, */
/* 基線對齊 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* 配置設定彈性元素方式 */
justify-content: space-between; /* 均勻排列每個元素
首個元素放置于起點，末尾元素放置于終點 */
justify-content: space-around; /* 均勻排列每個元素
每個元素周圍配置設定相同的空間 */
justify-content: space-evenly; /* 均勻排列每個元素
每個元素之間的間隔相等 */
justify-content: stretch; /* 均勻排列每個元素
'auto'-sized 的元素會被拉伸以适應容器的大小 */
/* 溢出對齊方式 */
justify-content: safe center;
justify-content: unsafe center;
/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
值
描述
測試
預設值。從行首起始位置開始排列。
測試 »
flex-end
從行尾位置開始排列。
center
居中排列。
space-between
均勻排列每個元素，首個元素放置于起點，末尾元素放置于終點。
space-evenly
均勻排列每個元素，每個元素之間的間隔相等。
space-around
均勻排列每個元素，每個元素周圍配置設定相同的空間。
initial
設定該屬性為它的預設值。請參閱 initial。
inherit
從父元素繼承該屬性。請參閱 inherit。
CSS 參考手冊：align-content 屬性
CSS 參考手冊：align-items 屬性
CSS 參考手冊：align-self 屬性