CSS弹性盒子动态调整大小：优先使用最大宽度

Question

CSS弹性盒子动态调整大小：优先使用最大宽度

26

我有一个包裹的行flexbox容器。
在其中的项目上，我设置：
• flex: 1;以使项目水平填充容器
•min-width: X; max-width: Y; 以使项目保持合适的大小。
这是一个简单的CodePen示例。 问题（如示例中所示）是resize-wrap的行为。 发生了什么：
每个项目都尽可能小，以便将最大数量的项目放入第一行，然后它们会成长到填满该行的所需大小。因此，项目的max-width几乎永远不会达到，并且项目更接近于min-width。 我要找什么：
每个项目尽可能大，以便将最少数量的项目放入第一行，然后它们缩小到刚好添加新项目并填充该行。因此，项目的min-width几乎永远不会达到，并且项目更接近于max-width。 换句话说：
我想要每行放置尽可能少的项目，而不是尽可能多的项目。

有没有一种在CSS中没有JS的方法？

谢谢！

- Salomon BRYS

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pixel Rubble · Accepted Answer

我认为你在寻找的是 flex-basis, justify-content, 和 align-content。

#container {
  background-color: green;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: stretch;
}

.item {
  flex: 1;
  flex-basis: 200px;
  height: 100px;
  min-width: 100px;
  max-width:200px;
  margin: auto;
  border: solid black 2px;
  background-color: red;
}

如果你想要这些红色方块填满整个区域，你可以将 div.item 的最大宽度去掉。