CSS用于一列、两行以及flexbox的同级（就像贝宁国旗一样！）

我发现最简单的解释方法就是向你展示贝宁国旗：

我想用CSS中的flexbox做一些类似的事情，但到目前为止我感到很困惑

关键是我需要这三个区域中的每一个都是兄弟，比如：

.flag{
显示器：flex；
弯曲方向：行；
}
/*下面我不确定*/
格林先生{
}
.红色，.黄色{
}

---

这是否可以在不添加中间节点的情况下包含

.red

和

.yellow

？在这一点上很容易，但我想知道是否有可能做到我上面所描述的。

您可以使用换行列获取贝宁国旗：

第一列（左）在

高度处为.green:100%

相对于.flag容器

第二列（右）为.yellow，.red，高度为：相对于.flag的50%

并且.green被分配

宽度：相对于.flag的40%

祝你的项目好运

.flag{
位置：相对位置；
显示器：flex；
柔性流：柱包裹；
宽度：200px；
高度：150像素；
边框：2件纯黑；
}
.green{背景：绿色；}
.yellow{背景：黄色；}
.red{背景：red；}
.col1{宽度：40%；高度：100%；}
.col2{宽度：60%；高度：50%；}

看看这是否对你有帮助：愚蠢的问题，但你是想掌握Flexbox的窍门还是想画贝宁的国旗？想了解Flexbox。我的绘画技巧并不高超，但我认为即使是我也能完成这件艺术作品：）不知何故，我产生了错觉，认为

display:flex

容器只有当它们是有

flex-*

规则集的孩子的父母时才会起作用。但我从您的示例中看到，

display:flex

也会影响子元素彼此之间的行为方式，只要它们设置了某种维度。谢谢我在整个互联网上找不到flexbox指南来解释这个简单的布局，太棒了！这太棒了。有人知道如何在不设置父级高度的情况下创建精确的布局吗？还有一个问题是，在不设置固定高度的情况下创建布局：）