使用 Flexbox 实现“蒙德里安”模式

Question

文章5 Really Useful Responsive Web Design Patterns 描述了一种用于网络布局的“蒙德里安”模式，将一个大盒子（2/3 或 3/4 宽度）与一些较小的项目排列在左侧，垂直堆叠在右侧 — 但是然后在中等大小的视口中，设计转变为以全宽显示主框，其他框并排，水平下方。 （在小屏幕上，所有内容都是 100% 宽度垂直堆叠。）

我使用浮动 div 实现了这种模式，但我想使用 flexbox 实现这种模式，这样盒子无论如何都可以具有相同的高度。这就是 flexbox 擅长的地方！

从概念上讲，我认为这可行，但我对此一点运气都没有。我很惊讶我没有找到任何对此的引用（除了一个 jsfiddle，它根本不是我想要的。）

我相信这可以通过列换行来实现，并且第一项的 flex 基础相当大，因此它占据了较大视口上的所有垂直空间，其余的框被包裹到第二列中，垂直堆叠。使用媒体查询，我认为您可以将 flex-wrap 更改为基于行，以便剩余的较小框并排排列在主全宽图像下方。

然而，我什么也没得到。甚至没有必要链接到我正在进行的 CodePen 工作，因为它太可悲了。 :-)

任何有兴趣展示如何做到这一点的超级灵活的人？

Answer 1

/* ┌──────────────────────────────────────────────┐
   │ These values determine when to switch layout │
   └──────────────────────────────────────────────┘ */
.big {
  flex-basis: 600px;
}
.outer.flex, .small {
  min-width: 300px;
}

/* ┌───────────────────────────────┐
   │ This other code makes it work │
   └───────────────────────────────┘ */
html, body, .outer.flex {
  margin: 0; /* Remove margins */
  height: 100%; /* Fill all window */
}
.flex {
  display: flex; /* Magic begins */
  flex-wrap: wrap; /* Multiline */
}
.big, .small {
  overflow: auto; /* In case the content doesn't fit */
  box-sizing: border-box; /* Desirable if you want border or paddin */
  border: 3px solid; /* Optional */
}
.big {
  flex-grow: 2; /* Grow to fill available space, with factor 2 */
  min-height: 50%; /* At least 50%, and allow 100% */
  background: red; /* Optional */
}
.inner.flex {
  flex: 1; /* Grow to fill available space, with factor 1 */
  min-width: 33vw; /* At least 33% of the width of the window */
  min-height: 50%; /* At least 50%, and allow 100% */
}
.small {
  flex: 1 33vw; /* Grow to fill available space, with factor 1 */
                /* At least 33% of the width of the window */
  background: blue; /* Optional */
}
.small:first-child {
  background: green; /* Optional */
}

<div class="outer flex">
  <div class="big"></div>
  <div class="inner flex">
    <div class="small"></div>
    <div class="small"></div>
  </div>
</div>