css - 定义垂直对齐的弹性盒项目的溢出方向

Question

我有一个带有单个项目的弹性框。该项目水平和垂直居中。当项目长于其容器时，它会在容器的顶部和底部均匀地溢出。我希望它只在底部溢出，并保持在顶部。有任何想法吗？

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

Answer 1

在标准的 Flexbox 草案下，单个 flex 项目可以通过使用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;