CSS3의 굴곡 방향 속성이 Chrome 21에서 효과를 잃었습니까?

Question

나는 정의 일부 CSS 스타일로 플렉스 속성을 사용한 버전 (21) 내 크롬을 업데이트 있습니다

display: -webkit-flexbox; 
-webkit-flex-pack: center; 
-webkit-flex-align: center; 
-webkit-flex-direction: column; 

하지만 새 버전 크롬의 모든 손실 효과를 발견, 그래서 나는에 변화를 시도 :

display: -webkit-box; 
-webkit-box-pack: center; 
-webkit-box-align: center; 
-webkit-flex-direction: column; 

머리 3 속성 마지막 -webkit-flex-direction 이전처럼 작동하지 않습니다 아직, correctedly 변경하지만, 개발 도구는 속성을 보여 크롬이 올바른지

데모 here의 속성을 사용하고 싶습니다.

이 문제를 해결하려면 어떻게해야합니까? 아니면 일부 속성을 추가해야합니까?

Answer 1

Chrome 21이 new flexbox 모델을 사용하는 첫 번째 버전이기 때문입니다.

참고 : Chrome 29 이상에서는 flex 속성에 접두사를 사용하지 않습니다.

첫 번째 예제를 기반으로 두 가지 구현을 작성했습니다. 첫 번째 데모는 flexbox 사양의 original version을 사용하고, 두 번째 데모는 latest version을 사용합니다. 또한

/* The properties are ordered to make it easier to compare them */ 
#old { 
    display: -webkit-box; 
    -webkit-box-pack: center; 
    -webkit-box-align: center; 
    -webkit-box-orient: vertical; 
} 
#flex { 
    display: -webkit-flex; 
    -webkit-justify-content: center; 
    -webkit-align-items: center; 
    -webkit-flex-direction: column; 
} 

참조 : http://jsfiddle.net/dPK5f/2/^{(http://jsfiddle.net/dPK5f/3/ 유연한 크기 :) : https://developer.mozilla.org/en/CSS/Using_CSS_flexible_boxes}