一列的CSS，两行与flexbox的兄弟姐妹（就像贝宁的旗帜！）

Question

我发现解释这个问题的最简单方法就是向您展示贝宁的旗帜：

我想在CSS中使用flexbox做类似的事情，但到目前为止，我已经陷入了困境。

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

<div class=flag>
  <div class=green></div>
  <div class=yellow></div>
  <div class=red></div>
</div>

.flag { 
  display:flex;
  flex-direction: row;
}

/* below this I'm not sure */
.green { 

}

.red, .yellow { 

}

如果不添加中间节点来包含.red和.yellow，这是否可行？这一点很容易，但我想知道我是否可以按照上面的描述进行操作。

Answer 1

您可以使用包装列来获取贝宁标志：

第一个（左）列是。height:100%相对于.flag容器的.green。

第二个（右）列是.yellow，.red在height:50%相对于.flag

.green相对于.flag

分配width:40%

祝你的项目好运！

＆＃13;

＆＃13;

.flag{
    position:relative;
    display:flex;
    flex-flow:column wrap;
    width:200px;
    height:150px;
    border:2px solid black;
}

.green{background:green;}
.yellow{background:yellow;}
.red{background:red;}

.col1{width:40%;height:100%;}
.col2{width:60%;height:50%;}

＆＃13;

<div class=flag>
  <div class='col1 green'></div>
  <div class='col2 yellow'></div>
  <div class='col2 red'></div>
</div>

＆＃13;

＆＃13;

＆＃13;