html - 为什么flex box从2列变为3列而不是从3列变为4列？

我正在开发一个应用程序，它在一个网格中向用户显示不同数量的卡。我在定义卡的div上设置了最大和最小宽度（375px和250px），卡在flex容器中。

.my-card-container {
    display: flex;
    flex-wrap: wrap;
}

.my-card {
    min-width: 250px;
    max-width: 375px;
    flex: 0 auto;
}

当只有一列时，卡的大小会增加到350px并停止。当屏幕宽度超过500px时，卡片缩小到250px，并且有两列。从2列到3列也是如此，这两列将展开，直到屏幕宽度为750px，然后每列下降到250px，并有第三列。但后来。。。
一旦有三列，所有列将扩展到350px，然后在右侧保留空白。这些卡片从不缩回以容纳更多的卡片。在有足够的空间容纳第四个350px列之前，还有三个列，然后在第五个列上也一样。
我想要在前两个转换中看到的行为，在给定的屏幕宽度下，有利于屏幕上最多的卡片数量，但是当我从3列变为4列时，我不知道会有什么不同。

最佳答案

flex: 0 auto被解析为

{
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

即使flex-shrink允许它缩小到低于正常值，也不会低于width的值。这意味着，当父项的宽度大于或等于min-width时，1000px项将呈现在第一行，就像第三行在4th处组成它一样。
这意味着父对象的宽度被限制在750px（因为它在2到3个项目中工作）和750px（因为它在3到4个项目中不工作）之间。
如果你找不到仅在1000px下限制父级width的因素（可能是对其自身或其任何父级设置的规则），你需要在你的问题中添加一个mcve，复制该问题，我将帮助你找到原因。
注意：默认情况下，使用您提供的代码，您请求的行为有效（我只添加了一些规则，让孩子变得可见-您显然不需要它们）：

.my-card-container {
    display: flex;
    flex-wrap: wrap;
}

.my-card {
    min-width: 250px;
    max-width: 375px;
    flex: 0 auto;
}

.my-card {
  min-height: 200px;
  border: 1px solid #eee;
  box-sizing: border-box;
}

<div class="my-card-container">
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
</div>

关于html - 为什么flex box从2列变为3列而不是从3列变为4列？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49546405/