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

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

Answer 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>

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

2 个答案: