Question

我有一个包裹的行flexbox容器在其中的项目，我设置：

flex: 1;因此，项目会逐渐填充容器
min-width: X; max-width: Y;'所以物品的尺寸可以接受。

Here is a simple codepen example

问题（在示例中可见）是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中取出最大宽度。

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

1 个答案: