我有一排盒子,每个盒子的最小/最大宽度为 300/400 像素。我希望 flexbox 在可能的情况下每行显示更多的框。在不能水平容纳等量 300 像素框的宽度处,它应该显示更大的 400 像素框以填充剩余空间。
在这个例子中,在 929px 的浏览器宽度下,它显示了两个 300px 的框,理想情况下它应该显示两个 400px 的框
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
max-width: 1260px;
margin-right: auto;
margin-left: auto;
padding: 5px;
}
.card {
flex: 0 1 300px;
width: 100%;
min-width: 300px;
max-width: 400px;
margin: 5px;
overflow: hidden;
background-color: grey;
}
.profile {
width: 100%;
min-width: 300px;
}
<div class="container">
<div class="card">
<img class="profile" src="http://placehold.it/400x400">
<p>Some Text</p>
</div>
</div>
最佳答案
问题是这一行:
flex: 0 1 300px;
您将 flex-grow 设置为 0,因此盒子不会增长以适应可用空间。
将该行更改为:
flex: 1 1 300px;
并且您的代码按预期工作。 ( View CodePen )
关于css - 使 flexbox 优先显示更多元素而不是元素的最大宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31142929/