我有一个包裹的行flexbox容器。
在其中的项目上,我设置:
•
•
这是一个简单的CodePen示例。 问题(如示例中所示)是resize-wrap的行为。 发生了什么:
每个项目都尽可能小,以便将最大数量的项目放入第一行,然后它们会成长到填满该行的所需大小。因此,项目的
每个项目尽可能大,以便将最少数量的项目放入第一行,然后它们缩小到刚好添加新项目并填充该行。因此,项目的
我想要每行放置尽可能少的项目,而不是尽可能多的项目。
有没有一种在CSS中没有JS的方法?
谢谢!
在其中的项目上,我设置:
•
flex: 1;
以使项目水平填充容器•
min-width: X; max-width: Y;
以使项目保持合适的大小。这是一个简单的CodePen示例。 问题(如示例中所示)是resize-wrap的行为。 发生了什么:
每个项目都尽可能小,以便将最大数量的项目放入第一行,然后它们会成长到填满该行的所需大小。因此,项目的
max-width
几乎永远不会达到,并且项目更接近于min-width
。
我要找什么:每个项目尽可能大,以便将最少数量的项目放入第一行,然后它们缩小到刚好添加新项目并填充该行。因此,项目的
min-width
几乎永远不会达到,并且项目更接近于max-width
。
换句话说:我想要每行放置尽可能少的项目,而不是尽可能多的项目。
有没有一种在CSS中没有JS的方法?
谢谢!
flex-basis
,则它允许它们在 100 到 200 像素之间具有可变宽度,但它会假定您希望它们尽可能地适合一行并开始缩小。 - Pixel Rubbleflex-wrap:wrap
,因为flex-flow
是它的简写。 - taystack