Question

我有一排盒子，每盒最小/最大宽度为300 / 400px。我希望flexbox能够在每行显示更多的盒子。在水平宽度不能容纳相同数量的300px盒子的情况下，它应该显示更大的400px盒子以填充剩余空间。

在这个例子中，在浏览器宽度为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>

View CodePen

Answer 1

问题在于这一行：

flex: 0 1 300px;

您已将flex-grow设置为0，因此框不会增长以适应可用空间。

将该行更改为：

flex: 1 1 300px;

您的代码按预期工作。（View CodePen）

使flexbox优先显示项目最大宽度上的更多项目

1 个答案: