Flex Center内容但与顶部对齐

Question

我目前正在使用Flexbox来布局我的网站，而我正在努力实现特定的设计。

我想要实现的设计如下所示 - 其中整体内容以页面中间为中心，但左侧内容与右侧内容的顶部对齐。身体的高度也是100vh。

Answer 1

您希望使用align-items和align-self来实现此目的：http://codepen.io/anon/pen/qbyBOd

代码转储：

<div class="container">
  <div>1</div>
  <div>2</div>
</div>

.container {
  display: flex;
  width: 200px;
  height: 100px;
  align-items: flex-start;
}

.container div {
  flex: 1;
  border: 2px solid red;
  background: gray;
}

.container div:nth-child(2) {
  flex: 1;
  align-self: stretch;
}

Answer 2

align-self是一个很好的喊叫

html,
body {
  height: 100%;
}
body {
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  justify-content: center;
}
.child1 {
  background-color: #e67e22;
  align-self: flex-start;
}
.child2 {
  background-color: #3498db;
  align-self: stretch;
}

<div class="container">
  <div class="child1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, voluptatibus.</div>
  <div class="child2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, vel!</div>
</div>