你好，我正在尝试使用flex均匀地分配额外的可用宽度的div框之间的图像之间的边距。我试过使用弹性基础：30%；然而，它不是均匀地分配图像的边距，而是将图像垂直地堆叠在彼此的顶部。
null
.images-container{
max-width: 1400px;
margin: 40px auto 0 auto;
display: flex;
background: #595959;
justify-content: space-between;
}
.images{
/* flex-basis: 30%; <- Issue */
} <!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="images-container">
<div class="images">
<img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="Maths">
<img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="ComputerScience">
<img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="Physics">
</div>
</div>
</body>null
justify-content:space-between所做的正是您要做的。它在您的代码中不起作用，因为您在图像周围放了另一个div。如果您删除div“images”，它会起作用：
null
.images-container{
max-width: 1400px;
margin: 40px auto 0 auto;
display: flex;
background: #595959;
justify-content: space-between;
}
.images{
} <!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="images-container">
<img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="Maths">
<img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="ComputerScience">
<img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="Physics">
</div>
</body>
您的flex-container.images-container只有一个子元素，即.imagesdiv。
如果希望flex影响图像本身，则必须将display:flex应用于.images，而不是应用于.images-container。
