无法使用flexbox对齐项目

Question

enter code here我无法比这个代码示例更好地解释它。

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: flex-start添加到#parent

  

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

     

flex-start：项目的交叉开始边缘位于交叉起始线

默认为拉伸，导致您的问题

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

上有更多内容

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要使用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。