수직으로 정렬 된 플렉스 박스 아이템의 오버 플로우 방향 정의

Question

저는 단일 아이템을 가진 플렉스 박스를 가지고 있습니다. 이 항목은 가로 및 세로 가운데에 있습니다. 아이템이 컨테이너보다 커지면 컨테이너의 상단과 하단에 똑같이 오버 플로우됩니다. 나는 바닥에 흘러 넘치고, 꼭대기에 고정되어있다. 어떤 아이디어?

이

http://codepen.io/wilsonpage/pen/LzryK (최신 인 flexbox에 대한 크롬 카나리아에서보기)

Answer 1

표준 인 flexbox 초안에서를, 하나의 플렉스 항목은 수직 및 수평으로 중심이 될 수 있습니다 margin: auto을 사용합니다. 대신 정렬 - 항목 속성이 사용하고자하는 것입니다 : 항목을 의미

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;