在主轴上，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 的输出:
在上面的输出中，
space-around 和 space-between 是什么意思？
最佳答案
来自 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/