Html 使用flexbox控制行中的项目计数

我想在第一行按原样显示4项，但第二行只显示3项，第三行显示4项，第四行显示3项，依此类推

我已经通过第n个孩子实现了这一点，但代码太多，不灵活，不可扩展

可以用flex吗？还是网格

*{
框大小：边框框；
}
.网格包装器{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.grid包装器.grid项{
宽度：25%；
文本对齐：居中；
填充物：5px；
}
p{
背景：ddd；
填充：15px；
}

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

<代码> > p>您只需考虑如下一个规则：

 /*7 = 4 (1st row) + 3 (2nd row) and 5 = 1st element in 2nd row (4 + 1)*/
.grid-wrapper .grid-item:nth-child(7n + 5) {
  width: calc(100%/3);
  flex-grow:0;
}

诀窍是使一个元素变大以触发换行，然后依靠
flex grow
填充空间

完整代码


*{
框大小：边框框；
}
.网格包装器{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.grid包装器.grid项{
宽度：25%；
文本对齐：居中；
填充物：5px；
柔性生长：1；
}
.grid wrapper.grid项：第n个子项（7n+5）{
宽度：计算值（100%/3）；
flex-grow:0；
}
p{
背景：ddd；
填充：15px；
}

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项


可以用flex吗？还是网格

下面是一个使用网格的解决方案，它更容易构建：


考虑使用
网格模板列：重复（12，1fr）
的12列网格布局


使用
网格列：span 3将每个
网格项
放入4列


7
网格项
s以一种模式重复；这意味着每一偶数行有3个项目，其中包含第n个子索引
7n
，
7n-1
和
7n-2



请参见下面的演示：


*{
框大小：边框框；
}
.网格包装器{
显示：网格；/*网格容器*/
网格模板列：重复（12，1fr）；/*12列布局*/
}
.grid包装器.grid项{
文本对齐：居中；
填充物：5px；
网格列：跨3；/*4个项目一行*/
}
网格包装。网格项：第n个子项（7n-2），
网格包装。网格项：第n个子项（7n-1），
.grid wrapper.grid项：第n个子（7n）{/*偶数行*/
网格列：跨度4；/*3个项目位于偶数行*/
}
p{
背景：ddd；
填充：15px；
}

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

网格项

所有项目的大小必须相同吗？像这样的东西对你有用吗？所以您想在哪里定义每行显示多少项？
n子级
语法允许您以编程方式执行此操作。否则，您可以在HTML中使用
data-
属性，并在CSS中使用属性选择器来关闭该属性。