一列的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,height:50%.red相对于.flag

而.green是width:40%相对于.flag 分配的

祝你的项目好运!

.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%;}

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