Flexbox：网格中项目之间的空间答案

【问题标题】：Flexbox: space between items in gridFlexbox：网格中项目之间的空间
【发布时间】：2015-10-24 00:42:28
【问题描述】：

我正在尝试使用带有 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 来制作动态包装器，但是这对媒体查询效果不佳......

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

【问题讨论】：

什么是 HTML...只有 5 个元素？我们是否可以更改 HTML？
很遗憾，我们根本无法更改 HTML。 HTML 只是一个标题、一个主要元素、一个旁白、一个相关的类和一个页脚（所有这些元素都包含更多的 HTML，但我认为这不相关？）。
然后副手...我会说你是 SOL。对不起。 JS 包装器出了什么问题...您可以将它与媒体查询结合起来，不是吗？
我创建了一个函数，将包装器添加到 DOM 的正确位置。我只是无法让它与 JS 中的媒体查询一起工作。 Javascript 似乎无法识别 em，我必须使用它们。我也无法让 eventListener 正常工作。
那么我建议您遇到的是 JS 问题……而不是 flexbox 问题。也许问一个新问题（您可能想删除这个问题），显示您尝试过的内容。 PS。演示很好...您可能希望在下一个问题中包含一个。

标签： css flexbox grid-layout

【解决方案1】：

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

【讨论】：

谢谢 :-) 我将再次尝试使用 Javascript 来动态添加额外的 HTML 元素。

【解决方案2】：

在不使用flexbox 修改 HTML 标记的情况下实现预期结果有点棘手。

但是我相信下面的例子会对你有所帮助，即使它没有使用flexbox：

* {
  box-sizing: border-box;
}
header,
aside,
footer,
.main,
.related {
  min-height: 100px;
  float: left;
  position: relative;
}
header {
  width: 25%;
  background: #f00;
  min-height: 200px;
}
.main {
  width: 50%;
  background: #0f0;
  min-height: 200px;
}
.related {
  width: 25%;
  background: #0ff;
}
aside {
  width: 25%;
  background: #f0f;
  float: right;
}
footer {
  width: 100%;
  background: #ff0;
}
header:after,
aside:after,
footer:after,
.main:after,
.related:after {
  content: attr(data-title);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
}

<header data-title="header"></header>

<div class="main" data-title="main"></div>

<div class="related" data-title="related"></div>

<aside data-title="aside"></aside>

<footer data-title="footer"></footer>

【讨论】：

非常感谢。我会用 Javascript 再试一次（我为此添加了另一个问题）。如果这不起作用，我会用这段代码试试 :)