Html 如何使用带衬垫的flexbox在3x3网格上跨越两根柱？

.page{
宽度：90%边距：自动；
}
.行集装箱{
宽度：100%；
显示器：flex；
}
.物品容器{
弹性：1；
填充：16px；
}
.项目-container-2x{
弹性：2；
}
.项目{
背景色：#e7e8e9；
高度：50px；
边框：1px实心#dddddd；
}

---

当在flex项目上使用

填充时，Flexbox有一种更复杂的计算剩余空间的方法，这使得它的工作更加复杂

在这种情况下，为了继续使用flex grow调整大小，在flex项的子项（
item
）上使用
margin
）会更简单。它将提供与父级上的
填充
相同的输出，并带有非flex子级

堆栈片段


.page{
宽度：90%；
保证金：自动；
}
.行集装箱{
宽度：100%；
显示器：flex；
}
.物品容器{
弹性：1；
}
.项目-container-2x{
弹性：2；
}
.项目{
背景色：#e7e8e9；
高度：50px；
边框：1px实心#dddddd；
边距：16px；/*从“.item container”移动并更改为“边距”*/
}

可能重复：CSS网格水槽解决方案：@Michael_B为什么不关闭它：）@TemaniAfif，因为我不能100%确定这个问题是重复的。审查到足以建立关联，但不足以结束。请随意继续。@Temaniaf如果在该dupe中使用了LonghHand
flex grow
，这会产生另一个结果，而不是shorthand
flex
将产生的结果，因此它并不完全相同。这里的问题是由Flexbox引起的，Flexbox是一种更复杂的计算flex项上剩余空间的方法，其中使用了填充。