CSS 图像弹性框边距答案

【问题标题】：CSS Images flexbox marginCSS 图像弹性框边距
【发布时间】：2017-11-11 23:35:54
【问题描述】：

您好，我正在尝试使用 flex 将 div 框的额外可用宽度平均分配为图像之间的边距。我尝试过使用 flex based: 30%;但是，它不是将边距均匀地分配给图像，而是将图像垂直堆叠在一起。

.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>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

justify-content: space-between 完全符合您的要求。它在您的代码中不起作用，因为您在图像周围放置了另一个 div。如果您删除 div “图像”，它可以工作：

.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>

如果你想保留额外的 div，你必须改变你的 CSS 以便图像 div 是你的 flex 容器：

.images-container{
        max-width: 1400px;
        margin: 40px auto 0 auto;
        background: #595959;
    }
    .images{
        display: flex;
        justify-content: space-between;
    }

【讨论】：

【解决方案2】：

您的弹性容器.images-container 只有一个子元素，即.images DIV。

如果你想让 flex 影响图像本身，你必须将 display: flex 应用到 .images，而不是 .images-container。

【讨论】：

【解决方案3】：

试试这个：

img {width: 30%;height: 30%;}

【讨论】：