在主轴上，justify-content作为space-between或space-around看起来很直观。
-------------------------------------------------- ----------
对于以下元素，
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "container">
<div class = "box box1">1</div>
<div class = "box box2">2</div>
<div class = "box box3">3</div>
<div class = "box box4">4</div>
<div class = "box box5">5</div>
<div class = "box box6">6</div>
<div class = "box box7">7</div>
<div class = "box box8">8</div>
<div class = "box box9">9</div>
<div class = "box box10">10</div>
</div>
</body>
</html>
在横轴上具有样式
.box{
color: white;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0, 1);
}
.box1{ background: #1abc9c; }
.box2{ background: #3498db; }
.box3{ background: #9b59b6; }
.box4{ background: #34495e; }
.box5{ background: #f1c40f; }
.box6{ background: #e67e22; }
.box7{ background: #e74c3c; }
.box8{ background: #bdc3c7; }
.box9{ background: #2ecc71; }
.box10{ background: #16ae85; }
/* Property of parent container - start */
/* Justify-content works on main axis of the border*/
.container{
display:flex;
justify-content: space-between;
flex-direction: column;
}
/* Property of parent container - start */
以下是横轴上
space-between和space-around的输出：在上面的输出中，
周围空间和中间空间是什么意思？
最佳答案
来自https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
justify-content: space-between; /* Distribute items evenly
The first item is flush with the start,
the last is flush with the end */
justify-content: space-around; /* Distribute items evenly
Items have a half-size space
on either end */
在第二个示例中，您没有为列设置高度，因为列的高度与内容的高度一样，所以没有填充空间，因此周围和之间的空间实际上不会占用任何额外的空间
在第一个示例中，flex为行，因为容器的宽度为100％，并且每个项目的宽度不等于该宽度，所以有多余的空间可以填充
关于css - 横轴上的对齐内容-flex，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47177962/