html – 删除灵活项目行之间的差距

参见英文答案 > Remove space (gaps) between multiple lines of flex items when they wrap                                    1个
>            How does flex-wrap work with align-self,align-items and align-content?                                    2个
这是我的示例代码：

#parent {
  display: flex;
  height: 350px;
  background: yellow;
}
#wrapper {
  flex: 1;
  display: flex;
  flex-flow: row wrap;
  margin: 0 10%;
  background: #999;
}

#top {
  flex: 1 100%;
  height: 50px;
  margin-top: 10px;
  background: red;
}

#left {
  width: 30%;
  height: 150px;
  margin: 10px 10px 0 0;
  background: blue;
}

#right {
  flex: 1;
  margin: 10px 0 0 0;
  background: green;
}

如您所见,顶部(红色)和左/右(蓝色/绿色)之间存在间隙(大灰色区域). FlexBox似乎在父元素(灰色)中均匀地传播所有内容.

但是,我不希望我的元素之间存在差距,我需要一切都“上升”到顶部.所有元素(最后)之后可能存在差距.

我尝试了所有我能找到/想到的东西：自动边距,对齐内容,对齐项目等.没有预期的效果.

怎么做到这一点？

最佳答案

您需要在flex-container或您的#wrapper元素中添加align-content: flex-start.

#parent {
  display: flex;
  height: 350px;
  background: yellow;
}
#wrapper {
  flex: 1;
  display: flex;
  flex-flow: row wrap;
  margin: 0 10% 50px 10%;
  background: #999;
  align-content: flex-start; /* Add this*/
}
#top {
  flex: 1 100%;
  height: 50px;
  margin-top: 10px;
  background: red;
}
#left {
  width: 30%;
  height: 150px;
  margin: 10px 10px 0 0;
  background: blue;
}
#right {
  flex: 1;
  margin: 10px 0 0 0;
  background: green;
}