Html Flexbox：当包装成一行时，如何堆叠两个&x2B；没有额外标记的元素？

更新： 因此，我能够使用Flexbox实现这一点。然而，正如社区中的一些人所指出的，警告（如固定高度）证明CSS网格是布局的最佳案例

我正试图依靠Flexbox行包装尽可能多的布局。我一直遇到这样一种情况：我希望将两个或多个元素堆叠在彼此的顶部（类似于浮动），但不希望添加标记，这会破坏这里的目的

我在任何地方都找不到这样的例子，也许这是不可能的

我创建了一个示例来展示我如何尝试堆叠两个元素，然后在另一行中堆叠3个项目

正文{
显示器：flex；
柔性包装：包装；
}
.全宽{
弹性：100%；
}
.50{
弹性：0.50%；
}
.三分之一{
弹性：0.33%；
}
twnty五号{
弹性：0.25%；
}
第三分区：第n个孩子（6），
第三分区：第n个孩子（7）{
//保证金：自动；
弹性：0.33%；
最大高度：50px；
高度：45px；
最小高度：45px；
}
第五组：第N名儿童（11），
第五组：第N名儿童（12），
第五组：第N名儿童（13）{
//左边距：自动；
弹性：0.25%；
高度：25px；
最小高度：25px；
}
div{
显示器：flex；
最小高度：100px；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
边框：1px实心#DFDFDF；
框大小：边框框；
}
* {
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}

全宽
五十
五十
三分之一
三分之一
三分之一栈顶
三分之一栈底
二十五
二十五
二十五
栈顶
堆栈中间
栈底

正如其他人所说，CSS

网格布局对于您的意图来说可能更简单、更干净
Flexbox
的设计目的是使其元素朝一个方向流动，而不是像表格或网格那样工作

但是依靠Flexbox，我已经重新创建了我能想到的最好的使用方法。除了它确实涉及额外的标记（不能真正实现所有目标-Flexbox的限制）

它在div元素上设置一个额外的类
.flexcol
，它将充当要堆叠的元素的包装器


.flexcol{
弯曲方向：立柱；
对齐项目：拉伸；
}
身体{
显示器：flex；
柔性包装：包装；
}
.全宽{
弹性：100%；
}
.50{
弹性：0.50%；
}
.三分之一{
弹性：0.33%；
}
twnty五号{
弹性：0.25%；
}
div{
显示器：flex；
最小高度：100px；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
边框：1px实心#DFDFDF；
框大小：边框框；
}
* {
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
全宽
五十
五十
三分之一
三分之一
三分之一栈顶
三分之一栈底
二十五
二十五
二十五
栈顶
堆栈中间
栈底
Hmm无法看到flex出现这种情况。但另一方面，使用网格显示，这是非常可行的…使用Flexbox和给定的标记是不可能的。为了让它工作，你需要包装那些应该共享垂直空间（上/中/下）的代码笔示例：谢谢你的评论。是的，包装它们或使用浮动或网格布局非常容易。如果我们能用flexbox来处理这个问题，我们就可以把FB推进二维布局。