CSS flexbox 动态调整大小：更喜欢 max-width
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25507658/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS flexbox dynamic resizing : prefer max-width
提问by Salomon BRYS
I have a row flexbox container that wraps.
On the items in it, I set:
我有一个包装的行 flexbox 容器。
在其中的项目上，我设置：
flex: 1;so items grow to fill horizontaly the containermin-width: X; max-width: Y;'so items stay within an acceptable size.
flex: 1;所以项目增长以水平填充容器min-width: X; max-width: Y;'所以物品保持在可接受的尺寸范围内。
Here is a simple codepen example.
The problem (as viewable in the example) is the behavior of the resize-wrap.
问题（如示例中所示）是 resize-wrap 的行为。
What happens:
Each item is as small as possible so the maximum number of them is put in the first line, they then grow just as much needed to fill the line. Therefore the item's max-widthis almost never reached and the items are much closer to min-width.
会发生什么：
每个项目都尽可能小，因此将它们的最大数量放在第一行，然后它们会根据需要增加多少来填充该行。因此，max-width几乎从未到达该项目，并且该项目更接近min-width.
What I'm looking for:
Each item is as big as possible so the minimum number of them is put in the first line, they then shrink just as much needed to add a new item and fill the line. Therefore the item's min-widthis almost never reached and the items are much closer to max-width.
我在寻找什么：
每个项目都尽可能大，因此将最少数量的项目放在第一行，然后根据添加新项目和填充该行所需的数量缩小它们。因此，min-width几乎从未到达该项目，并且该项目更接近max-width.
In other words:
I want the minimum possible number of items per line, not the maximum.
换句话说：
我想要每行尽可能少的项目数，而不是最大值。
Is there a way to do that in CSS without JS ?
有没有办法在没有 JS 的 CSS 中做到这一点？
Thanks !
谢谢 ！
回答by FiSH GRAPHICS
I think what you're looking for is flex-basis, justify-content, and align-content.
我想你要找的是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;
}
If you want the red boxes to fill the entire area, you can take the max width off the div.item.
如果你想让红色框填满整个区域，你可以去掉 div.item 的最大宽度。
