css3 – CSS flexbox动态调整大小：prefer max-width

我有一行包装的flexBox容器。
在其中的项目中，我设置：

flex：1;所以物品成长以容纳水平
> min-width：X; max-width：Y;’所以物品保持在可接受的大小。

Here is a simple codepen example。

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

怎么了：
每个项目都尽可能的小，所以最大数量被放在第一行，然后它们的增长就像需要填充一样。因此，项目的最大宽度几乎从未达到，项目更接近最小宽度。

我正在寻找：
每个项目都是尽可能大的，所以最小数量被放在第一行，然后收缩只需要添加一个新的项目并填写该行。因此，项目的最小宽度几乎从未达到，并且项目更接近max-width。

换一种说法：
我想要每行的最小可能数量，而不是最大值。

有没有办法在CSS没有JS？

谢谢 ！

解决方法

我想你正在寻找的是基于flex的，合理的内容和对齐内容。

#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取最大宽度。

原文地址：https://www.jb51.cc/css/218184.html