CSS flexbox动态调整大小:更喜欢max-width

Question

我有一个包装的行flexbox容器.
在其中的项目,我设置:

• flex: 1; 因此,物品会逐渐填满容器
• min-width: X; max-width: Y;' 所以物品保持在可接受的大小.

这是一个简单的codepen示例.

问题(在示例中可见)是resize-wrap的行为.

会发生什么:
每个项目都尽可能小,所以它们的最大数量放在第一行,然后它们的增长就像填充线一样多.因此,物品max-width几乎从未到达,物品更接近min-width.

我正在寻找的东西:
每个项目都尽可能大,所以它们的最小数量放在第一行,然后缩小,就像添加一个新项目并填充该行一样.因此,物品min-width几乎从未到达,物品更接近max-width.

换句话说:
我想要每行最少可能的项目数,而不是最大数量.

有没有办法在没有JS的CSS中做到这一点？

谢谢 !

Answer 1

我想,你要寻找的是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中取出最大宽度.