当容器设置为包装时，控制每个flex-line上的项目数 [英] Control the number of items on each flex-line when container is set to wrap
问题描述
我使用css flexbox在容器中分配多个项目。我有一个像这样的flex容器：
I am using css flexbox to distribute a number of items in a container. I have a flex container like this:
.container{
display: flex;
flex-flow: row wrap;
align-content : center;
justify-content : center;
align-items : center;
}
当我添加一定数量的固定宽度/按预期放置：如果它们不适合在单个柔性线上，则容器创建新的，并且一些项目被包装到下一行。我想做的是对同时移动到下一行的项目的数量有一些控制。
When I add a certain number of fixed width/height items to the container they are placed as expected: if they don´t fit on a single flex-line the container creates a new one and some of the items are wrapped onto the next line. What I would like to do is have some control over the number of items that are displaced to the next line at he same time.
例如，如果我放置9项（首先在一条柔性线上），然后我收缩浏览器窗口，容器将首先移位只有最右边的项目到下一行，在第一个flex-line上留下8个项目，第二个只有一个，在我看来不是很美观愉快。如果我收缩窗口更多，我有一个7-2分布，等等。
For example, if I place 9 items (that at first fit on one flex-line) and then I shrink the browser window, the container will first displace only the rightmost item to the next line, leaving 8 items on the first flex-line and only one on the second, what is not very aesthetically pleasant in my opinion. If I shrink the window more, I have a 7-2 distribution, and so on.
我的问题是，有任何方式，我可以控制多少项目被移位立刻？我的目的是让许多项目在弹性线之间均匀分布，对于任何数量的项目，其中更宽的项目总是在顶部。
My question is, is there any way I can control how many items are displaced at once? My intent would be to have the number of items evenly distributed among the flex-lines, having the wider ones always on top, for any number of items.
例如， 9个项目将以这种方式分配：
For example, 9 items would be distributed this way:
-
当所有项目都符合一行时：
1 flex-line： 9个项目
When all items fit in a line: 1 flex-line: 9 items
当9个项目不适合跳转到：
2个折线：第一行有5个项目，
When 9 items don´t fit jump to: 2 flex-lines: 5 items on the first line, 4 on the second.
当5个项目不适合跳转到：
3 flex-lines：3-3-3
When 5 items don´t fit in a line jump to: 3 flex-lines: 3-3-3
当3个项目不适合跳转到：
5 flex-lines：2-2-2-2-1
When 3 items don´t fit in a line jump to: 5 flex-lines: 2-2-2-2-1
有没有办法（也许借助于jquery）来完成这样的事情？对于已知数量的元素的任何解决方案将被理解，尽管我的目的是找到一个动态地适用于任何数量的项目。
感谢！
Is there any way (maybe with the aid of jquery) to accomplish something like that? Any solution for a known number of elements would be appreciated, although my intent is to find one dynamically applicable to any number of items. Thanks!
推荐答案
您要查找的内容有时被称为数量查询
What you're looking for is sometimes referred to as Quantity Queries.
如果媒体查询允许基于视口尺寸的断点， >允许基于内容数量的断点（例如同胞计数）。
If media queries allow for breakpoints based on viewport dimensions, quantity queries allow for breakpoints based on content quantity (e.g., sibling count).
它不是任何官方标准的一部分，但我不会称之为黑客。代码可以相当优雅。然而，它有点涉及。这里：
It's not part of any official standard but I wouldn't call it a hack. The code can be quite elegant. It is a bit involved, however. Here you go:
- Quantity Queries for CSS
- Styling elements based on sibling count
- How to specify an element after which to wrap in css flex?
这篇关于当容器设置为包装时，控制每个flex-line上的项目数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
