Question

文章5 Really Useful Responsive Web Design Patterns描述了网页上布局的“蒙德里安”图案，它在左边（2/3或3/4宽度）排列了一个大盒子，里面有一些较小的物品，在右边垂直堆放 - 但是在中等大小的视口中，设计转移到主箱全宽，其他箱子并排，水平在下方。（在小屏幕上，一切都是垂直堆叠的100％宽度。）

我使用浮动div实现了这个模式，但是我希望使用flexbox实现这个模式，这样无论如何都可以使用相同的高度。这就是flexbox非常擅长的！

从概念上讲，我认为这可以起作用，但我对这件事并没有任何运气。我很惊讶我没有找到任何对此的引用（除了一个不是我真正想要的jsfiddle。）

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

然而，我一无所获。甚至连我的CodePen工作都没有意义，因为它太可悲了。： - ）

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

Answer 1

＆＃13;

/* ┌──────────────────────────────────────────────┐
   │ 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 */
}

＆＃13;

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

＆＃13;

使用Flexbox实现“Mondrian”模式

1 个答案: