Question

（我使用Chrome v.39 +）

我试图使用flex-wrap属性来水平和垂直地堆叠子div，但是我看到了一些非常奇怪的行为。例如，如果有3个子div并且最后一个给出100％的宽度（导致它换行），则会引入不需要的间隙。

有时候，我可以通过给予align-items: stretch或height: 100%来强制前2个div来尊重height: calc(100% - 1px)，有时候他们不会通过神秘的差距，有时候他们＆如果我试图强迫它们伸展，它们甚至会消失在一起。

这里是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

为什么＆＃34; flex-wrap：wrap＆＃34;打破＆＃34;对齐项目＆＃34;？

1 个答案: