当容器设置为 wrap 时，控制每个 flex-line 上的项目数答案

【问题标题】：Control the number of items on each flex-line when container is set to wrap当容器设置为 wrap 时，控制每个 flex-line 上的项目数
【发布时间】：2016-01-24 13:51:41
【问题描述】：

我正在使用 css flexbox 在容器中分配多个项目。我有一个这样的弹性容器：

.container{
    display: flex;
    flex-flow: row wrap;            
    align-content : center;
    justify-content : center;
    align-items : center;
}

当我将一定数量的固定宽度/高度项目添加到容器中时，它们会按预期放置：如果它们不适合单个柔性线，则容器会创建一个新的，并且一些项目会被包裹到下一行。我想做的是对同时移到下一行的项目数量进行一些控制。

例如，如果我放置 9 个项目（最初适合一个 flex-line），然后缩小浏览器窗口，容器将首先仅将最右边的项目替换到下一行，在第一行留下 8 个项目flex-line，第二个只有一个，在我看来这不是很美观。如果我进一步缩小窗口，我有一个 7-2 分布，依此类推。

我的问题是，有什么方法可以控制一次置换多少物品？我的意图是让项目的数量均匀分布在弹性线中，对于任意数量的项目，总是让较宽的项目在顶部。

例如，9 个项目会以这种方式分配：

当所有项目都排成一行时： 1 条 flex-line：9 项
当 9 个项目不适合时跳转到： 2 flex-lines：第一行 5 个项目，第二行 4 个。
当 5 个项目不适合一行时，跳转到： 3 条柔性线：3-3-3
当 3 个项目不适合一行时，跳转到： 5 条柔性线：2-2-2-2-1

有什么方法（可能借助 jquery）来完成类似的事情吗？任何已知数量的元素的解决方案都会受到赞赏，尽管我的意图是找到一个动态适用于任意数量的项目的解决方案。谢谢！

【问题讨论】：

标签： jquery css flexbox

【解决方案1】：

你的意思是flex-basis？

.container .item {
    flex-basis: 25%;
}

每行最多分成 4 个项目。

【讨论】：

【解决方案2】：

您要查找的内容有时称为数量查询。

如果媒体查询允许基于视口尺寸的断点，数量查询允许基于内容数量（例如，兄弟数量）的断点。

它不是任何官方标准的一部分，但我不会称之为 hack。代码可以非常优雅。但是，这有点涉及。给你：

【讨论】：