无法使用flexbox对齐项目[重复]

Question

这个问题在这里已有答案：

• Remove space (gaps) between multiple lines of flex items when they wrap 1回答

enter code hereI无法真正解释它比这个代码示例更好。

https://codepen.io/anon/pen/BYeger

我想让#thing_down_here触摸#thing_up_here，但我无法弄清楚正确的组合。

html, body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box
}

#parent {
  width: 100vw;
  height: 100vh;
  background: cornsilk;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#thing_up_here {
  flex: 1 0 100%;
  background: skyblue;
  height: 80px;
}

#thing_down_here {
  flex: 0 0 50%;
  background: lightgreen;
  height: 100px;
}

<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>

Answer 1

您需要使用align-content属性来设置沿交叉轴的分布。

html, body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box
}

#parent {
  width: 100vw;
  height: 100vh;
  background: cornsilk;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
}

#thing_up_here {
  flex: 1 0 100%;
  background: skyblue;
  height: 80px;
}

#thing_down_here {
  flex: 0 0 50%;
  background: lightgreen;
  height: 100px;
}

<div id="parent">
  <div id="thing_up_here"></div>
  <div id="thing_down_here"></div>
</div>

了解更多关于align-content的信息。

Answer 2

将align-content: flex-start添加到#parent

这定义了如何沿当前行的横轴布置弹性项目的默认行为。可以将其视为横轴（垂直于主轴）的对齐内容版本。

flex-start：项目的交叉开始边缘边缘放置在交叉起始线上

默认值为stretch，导致您的问题

更多关于https://css-tricks.com/snippets/css/a-guide-to-flexbox/的信息

html, body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box
}

#parent {
  width: 100vw;
  height: 100vh;
  background: cornsilk;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
}

#thing_up_here {
  flex: 1 0 100%;
  background: skyblue;
  height: 80px;
}

#thing_down_here {
  flex: 0 0 50%;
  background: lightgreen;
  height: 100px;
}

<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>