css - 使用 Flexbox 实现 "Mondrian"模式

Question

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

我用 float div 实现了这个模式，但我想用 flexbox 实现这个，这样盒子无论如何都可以具有相同的高度。这就是 flexbox 所擅长的!

从概念上讲，我认为这可行，但我对此一点运气都没有。我很惊讶我没有找到任何对此的引用(除了一个 jsfiddle，它根本不是我正在寻找的东西。)

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

然而，我一无所获。甚至链接到我正在进行的 CodePen 工作也没有意义，因为它太可悲了。 :-)

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

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>