CSS flexbox动态调整大小:首选最大宽度
CSS flexbox动态调整大小:首选最大宽度
提问于 2014-08-26 21:57:26
我有一个包装的行Flexbox容器。
在其中的项目上，我设置了：
flex: 1;使项目增长以水平填充containermin-width: X; max-width: Y;'，以便项目保持在可接受的大小内。
.
问题(如示例中可见)是resize-wrap的行为。
发生了什么：
每一项都尽可能小，因此它们的最大数量被放在第一行，然后它们就会增长到需要填充一行的程度。因此，项的max-width几乎永远不会到达，并且项更接近于min-width。
我要找的东西：
每一项都尽可能大，因此它们的最小数量被放在第一行，然后它们会缩小到需要添加新项并填充该行的程度。因此，项的min-width几乎永远不会到达，并且项更接近于max-width。
换言之，：
我想要每行项目的最小可能数量，而不是最大数量。
有没有办法在没有JS的CSS中做到这一点？
谢谢！
回答 1
Stack Overflow用户
发布于 2014-10-25 03:30:33
我想您要找的是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的最大宽度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25507658
复制相关文章
相似问题
腾讯云开发者
