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

Question

我们有一个包含 5 个盒子的 flex 容器，我被要求像下图那样显示它们。

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

如讨论和回答 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>

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

Answer 1

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

Codepen Demo

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

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