Question

这是我的示例代码：

#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;
}

<div id="parent">
  <div id="wrapper">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
  </div>
</div>

如您所见，top（红色）和left / right（蓝色/绿色）之间存在间隙（大灰色区域）。 Flexbox似乎在父元素（灰色）中均匀地传播所有内容。

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

我尝试了我能找到/想到的所有内容：auto margins，justify-content，align-items等。没有预期效果。

如何实现这一目标？

Answer 1

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

＆＃13;

#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;
}

＆＃13;

<div id="parent">
  <div id="wrapper">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
  </div>
</div>

＆＃13;

Answer 2

在多行弹性行布局中，align-content控制弹性项在换行时如何垂直对齐，并且由于其默认值为stretch，这是预期的行为。

将其更改为align-content: center;，您就会看到他们的对齐方式如何变为垂直中间位置。

＆＃13;

#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: center;
}

#top {
  flex: 1 100%;
  height: 50px;
  background: red;
}

#left {
  width: 30%;
  height: 150px;
  background: blue;
}
#right {
  flex: 1;
  background: green;
}

＆＃13;

<div id="parent">
  <div id="wrapper">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
  </div>
</div>

＆＃13;

消除灵活项目行之间的间隙

2 个答案: