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