使用flexbox实现一个类似贝宁国旗的单列两行兄弟元素的CSS布局！

Question

使用flexbox实现一个类似贝宁国旗的单列两行兄弟元素的CSS布局！

cssflexbox

12

我找到的最简单的解释方法就是向您展示贝宁国旗：

enter image description here

我想在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，这是否有可能？在那一点上很容易实现，但我想知道是否可以做到我上面所描述的。

- user2467065

看看这个能否帮到你： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - A.Sharma

愚蠢的问题，但你是想掌握Flexbox还是试图绘制贝宁国旗？ - Mr Lister

试图学习Flexbox。我的绘画技能并不是很强，但我想我甚至也能完成这件艺术品的工作 :) - user2467065

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- markE · Accepted Answer

您可以使用包装列来获取贝宁国旗：

第一（左侧）列是位于.flag容器的高度：100％的绿色。

第二（右侧）列为 .flag 相对于 height：50％ 的黄色、红色。

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

祝您的项目好运！

enter image description here

.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>