Flexbox 布局模式：5 个正方形（1 个大，4 个小）

Question

我正在尝试组合一个弹性盒布局 - 出于这个问题的目的，我将其称为“方形五块”布局（见图） - 但我遇到了麻烦，正如我尝试过的所有实验一样包裹不正确。

我见过使用浮动完成的相同布局，但我希望能够稍微适应未来并使用更新的方法 - 因此是 Flexbox。我尝试过搜索这种模式，但似乎没有一致的名称，因此找到类似的示例很困难。

我也使用视口单位来确保块保持完美的正方形，所有这些都基于视口宽度（vw）单位。

div { width: 25vw; height: 25vw; }
div:first-of-type { width: 50vw; height: 50vw; }

主要特征是所有块都应该是正方形，但是第一个块的大小应该是其余四个块总和的大小。以前有人见过或做过这样的布局吗？

谢谢！！

Answer 1

嵌套弹性盒在这里可以与媒体查询结合使用。

带媒体查询的 Codepen 演示

基本上：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.parent {
  width: 100vw;
  display: flex;
}
.col {
  flex: 0 0 50vw;
  height: 50vw;
  background: blue;
}
.wrap {
  display: flex;
  flex-wrap: wrap
}
.box {
  flex: 0 0 25vw;
  height: 25vw;
}
.red {
  background: red;
}
.pink {
  background: pink;
}
.orange {
  background: orange;
}
.grey {
  background: grey;
}

<div class="parent">
  <div class="col"></div>
  <div class="col wrap">
    <div class="box red"></div>
    <div class="box pink"></div>
    <div class="box orange"></div>
    <div class="box grey"></div>
  </div>
</div>