我正在使用 css flexbox 在一个容器中分配一些元素。我有一个像这样的 flex 容器:
.container{
display: flex;
flex-flow: row wrap;
align-content : center;
justify-content : center;
align-items : center;
}
当我将一定数量的固定宽度/高度的元素添加到容器时，它们会按预期放置:如果它们不适合单个柔性线，则容器会创建一个新的，并且一些元素会被包裹到下一行。我想做的是对同时转移到下一行的元素数量进行一些控制。
例如，如果我放置 9 个元素(最初适合一个 flex-line)然后我缩小浏览器窗口，容器将首先仅将最右边的元素移到下一行，在第一行留下 8 个元素柔性线，第二个只有一个，我认为这在美学上不是很令人愉快。如果我进一步缩小窗口，我会得到 7-2 分布，依此类推。
我的问题是，有什么方法可以控制一次置换多少元素？我的意图是让元素的数量均匀分布在 flex 线中，对于任意数量的元素，较宽的总是在最上面。
例如，9 件元素将以这种方式分配:
当所有元素都排成一行时: 1 条 flex 线:9 项
当 9 件元素不适合时跳转到: 2 条 flex 行:第一行 5 个元素，第二行 4 个。
当一行中放不下 5 个元素时，跳转至: 3条 flex 线:3-3-3
当 3 个元素不适合一行时跳转到: 5 条 flex 线:2-2-2-2-1
有没有办法(也许借助 jquery)来完成类似的事情？任何已知数量元素的解决方案都将受到赞赏，尽管我的意图是找到一个动态适用于任意数量元素的解决方案。 谢谢!
最佳答案
您要查找的内容有时称为数量查询。
如果媒体查询允许基于视口(viewport)尺寸的断点，数量查询允许基于内容数量(例如兄弟数量)的断点。
它不是任何官方标准的一部分，但我不会将其称为 hack。代码可以非常优雅。然而，它有点复杂。给你:
关于jquery - 当容器设置为 wrap 时控制每个 flex-line 上的元素数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33329234/