css - 使 flexbox 优先显示更多元素而不是元素的最大宽度

Question

我有一排盒子，每个盒子的最小/最大宽度为 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>

View CodePen

Answer 1

问题是这一行:

flex: 0 1 300px;

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

将该行更改为:

flex: 1 1 300px;

并且您的代码按预期工作。 ( View CodePen )