使 flexbox 优先显示更多项目而不是项目的最大宽度答案

【问题标题】：Make flexbox prioritise showing more items over the max-width of item使 flexbox 优先显示更多项目而不是项目的最大宽度
【发布时间】：2015-07-01 00:07:20
【问题描述】：

我有一排盒子，每个盒子的最小/最大宽度为 300/400 像素。我希望 flexbox 在可能的情况下每行显示更多的框。在宽度无法水平放置等量的 300 像素框时，它应该显示更大的 400 像素框以填充剩余空间。

在此示例中，在浏览器宽度为 929 像素时，它显示了两个 300 像素的框，理想情况下它可以容纳并且应该显示两个 400 像素的框

.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

【问题讨论】：

标签： css flexbox

【解决方案1】：

问题出在这一行：

flex: 0 1 300px;

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

将该行更改为：

flex: 1 1 300px;

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

【讨论】：

多哈。谢谢。你能限制第二行框的宽度吗？因此，如果顶行是 300px 的框，那么底行将匹配它而不是增长到可用的 400px 宽度。
@DanChristian 我不这么认为。您可以将 flex-basis 设置为基于百分比的值，例如 calc(25% - 10px)，然后使用媒体查询在某些断点处更改该值。
@DanChristian 实际上，似乎有更好的解决方案：stackoverflow.com/a/29642790/1157054