css - Flexbox:网格中元素之间的空间

Question

我正在尝试使用 flexbox 制作带有媒体查询的响应式布局。我需要在右侧制作一个布局，两个侧边栏位于彼此的正下方，如下所示: Image: aside right under the related 目前的情况是这样的(我也可以将盒子向右移动，但是相关的下面仍然有一个空白，即使高度很好)。 Image: aside is on the the next line and not under the related 简化代码:

body {
 display: flex; 
 flex-direction: row;
}

header {
 flex: 0 1 25%;
}

main {
 flex: 0 1 40%;
}

.related {
 flex: 0 1 17%;
 height: 100%;
}

aside {
 flex: 0 1 17%;
}

footer {
 display: flex;
 flex: 0 1 100%;
}

我不能在 HTML 中为这两个框放置包装器(我不能在 HTML 本身中使用包装器，因此我将 body 用作 flex 容器)。我想要的东西甚至可以用 flexbox 实现吗，或者我可以为此使用哪种其他技术？我尝试了很多不同的高度，我什至尝试了 Javascript 来制作动态包装器，但这对媒体查询来说效果不佳......

如果您需要更多信息，请告诉我。

Answer 1

将 body 用作 flex 容器应该不是问题，除非存在设计问题。我认为你应该像这样进行布局设计 <http://codepen.io/erdysson/pen/wKyEzZ%20> 我希望，这可以解决问题并且是您想要的。