我如何在flex-css中实现下面的布局

Question

我们有一个包含5个盒子的弹性容器，我被要求显示它们，如下图所示。

通过在父容器中放置另外两个容器，我能够实现类似的布局。如下。

讨论并回答 Here 。但是，考虑到项目是存在的，据说这引入了很多复杂性，当我们采用时，会强制改变我们的js类的结构。我现在的任务是将它们放在一个容器中来实现同样的目标。

.layout-5-3 {
    flex-direction: row;
    display: flex;
}

.layout-5-3 > div:nth-child(1) {
    flex-basis: 48%;
}  

.layout-5-3 > div:nth-child(2),
.layout-5-3 > div:nth-child(3),
.layout-5-3 > div:nth-child(4),
.layout-5-3 > div:nth-child(5) {
    flex-basis: 48%;
    flex-direction: column;
}  

和我的HTML

<div class="layout-5-3">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
  <div class="box">Box4</div>
  <div class="box">Box5</div>
</div>

我期待我的第一个孩子放在左边，其余四个占据另一半空间。考虑到我的基础。请问有什么方法可以实现这一点而不在父容器中引入另一个flex容器？任何帮助将不胜感激。

Answer 1

这是可能的，但需要在父级上定义固定高度，并且在子级上定义宽度......并且在各种浏览器中以各种方式仍然存在错误。

Codepen Demo

＆＃13;

＆＃13;

.layout-5-3 {
  display: flex;
  background: lightblue;
  height: 250px;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap
}
.layout-5-3 > div {
  border: 1px solid black;
}
.layout-5-3 > div:nth-child(1) {
  width: 48%;
  flex: 0 0 100%;
  background: lightgreen;
}
.layout-5-3 > div:nth-child(2),
.layout-5-3 > div:nth-child(3),
.layout-5-3 > div:nth-child(4),
.layout-5-3 > div:nth-child(5) {
  width: 48%;
  flex: 1;
  background: pink;
}

＆＃13;

<div class="layout-5-3">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
  <div class="box">Box4</div>
  <div class="box">Box5</div>
</div>

＆＃13;

＆＃13;

＆＃13;