css - 垂直に配置されたフレックスボックス アイテムのオーバーフロー方向の定義

Question

単一のアイテムを持つフレックスボックスがあります。このアイテムは、水平方向と垂直方向の中央揃えです。アイテムがコンテナーよりも高くなると、コンテナーの上部と下部で均等にオーバーフローします。一番下だけオーバーフローして、一番上に固定したままにしたいです。何か案は？

http://codepen.io/wilsonpage/pen/LzryK (最新の Flexbox については Chrome Canary で表示)

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;