Question

我正在使用css flexbox在容器中分发许多项目。我有一个像这样的flex容器：

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

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

例如，如果我放置9个项目（首先适合一个弹性线）然后缩小浏览器窗口，容器将首先仅将最右边的项目移动到下一行，在第一个项目上留下8个项目弹性线和第二个只有一个，在我看来，在美学上不是很美观。如果我缩小窗口，我有7-2分布，依此类推。

我的问题是，有什么办法可以控制一次有多少物品被转移？我的目的是让物品的数量在柔性线之间均匀分布，让更宽的物品始终位于顶部，用于任意数量的物品。

例如，9个项目将以这种方式分发：

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

有没有办法（也许借助jquery）来完成类似的事情？可以理解任何已知数量元素的解决方案，但我的目的是找到一个动态适用于任意数量的项目。谢谢！

Answer 1

您正在寻找的内容有时称为 数量查询 。

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

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

Answer 2

您的意思是flex-basis吗？

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

每行最多可分4个项目。

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

2 个答案: