定义垂直对齐的flexbox项目的溢出方向

Question

我有一个带有单个项目的flexbox。此项目水平和垂直居中。当物品长于其容器时，它会在容器的顶部和底部均匀溢出。我希望它只在底部溢出，并保持锚定在顶部。有什么想法吗？

http://codepen.io/wilsonpage/pen/LzryK（在Chrome Canary中查看最新的Flexbox）

Answer 1

在标准Flexbox草稿下，使用margin: auto可以将单个弹性项目垂直和水平居中。您将要使用此而不是align-items属性：

http://codepen.io/cimmanon/pen/EJdvn

section {
  display: flex;
  justify-content: center; /* you can remove this here, but its not hurting anything */
  /* remove align-items */

  height: 80%;
  margin: 5% 0;
  background: green;
}

div {
  margin: auto; /* add */
}

Answer 2

尝试在弹性项目上设置以下内容：

align-self: flex-start;