css - 为什么 "flex-wrap: wrap"会中断 "align-items"？

Question

(我使用的是 Chrome v.39+)

我正在尝试使用 flex-wrap 属性水平和垂直堆叠子 div，但我看到了一些非常奇怪的行为。例如，如果有 3 个子 div，最后一个的宽度为 100%(使其环绕)，则会引入不需要的间隙。

有时我可以通过给它们 height: 100% 或 height: calc(100% - 1px)，其他时候它们不会拉伸(stretch)穿过神秘的缝隙，有时如果我试图强制它们拉伸(stretch)它们甚至会一起消失。

这是一个 simplified example of the problem .它们是灰色的，不应该是可见的。

为什么这些间隙会出现在 flex-wrapped div 中，我该如何防止它们出现？

Answer 1

灰色区域在底部仍然可见，因为您在父容器上设置了高度。

如果您不想看到该灰色区域，请从容器中移除高度并在第一行的其中一个元素上添加您需要的固定高度

DEMO

.a {
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  top: 100px;
  left: 200px;
  background-color: #999;
}
.b {
  height: 150px;
  background-color: #00ff00;
}
.c {
  background-color: #0000ff;
}
.d {
  background-color: #ff0000;
}
.b {
  flex-grow: 1;
  flex-shrink: 0;
}
.c {
  width: 5px;
  flex-shrink: 0;
}
.d {
  width: 100%;
  height: 10px;
  flex-shrink: 0;
}

<div class='a'>
  <div class='b'></div>
  <div class='c'></div>
  <div class='d'></div>
</div>

注意:如果您想避免固定尺寸 - 只需从红色 div 中删除 height:10px。

这将确保没有间隙并且每行具有相同的高度

DEMO