我有一行包装的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取最大宽度。
