-webkit-flex가 Android에서 제대로 표시되지 않음

Question

display:flex의 놀라운 기능을 실현 한 후 Windows의 Chrome 26에서 볼 때 정확히 원하는 방식으로 표시되는 웹 페이지를 만들었습니다. 그러나 Android 26에서 Chrome 26에서는 작동하지 않으며 내 에뮬레이터의 Android 브라우저 4.1에서도 작동하지 않습니다. caniuse에 따르면 이러한 모든 브라우저가이를 지원해야합니다.

아마도 우연히도 Android에서 보이는 방식은 이전 버전 인 display:box으로 전환했을 때의 모습과 같습니다 (내가 알 수있는 한).

내 질문은, 나는이 교차 장치 문제를 방지 할 수있는 방법 : 여기

는 안드로이드 대 Windows의 모습입니다? 아마도 표준이 될 때까지 플렉스 이외의 다른 것을 사용하는 것이 더 좋을 것입니다. 누구든지 플렉스를 사용하지 않거나 안드로이드에서 작동하는 작동 예제를 제공 할 수 있습니까? 모바일 웹 앱용입니다. 어떤 도움이라도 대단히 감사합니다. 내 코드에 대한 링크는 다음과 같습니다. -webkit-플렉스와

: JSFiddle

상자로 : JSFiddle주의해야 할 다른 속성/값이 3 인 flexbox 초안이 있습니다

Answer 1

궁금한 사람들에게는 flex를 사용하지 않기 위해 코드를 완전히 다시 작성했습니다. 여기 내 목적을 위해 잘 작동하는 JSFiddle에 대한 링크가 있습니다. http://jsfiddle.net/8juSk/

@cimmanon에서 제안한대로 box 및 box-ordinal-group을 사용합니다.

Answer 2

. Caniuse는 현재 초안을 지원하는 브라우저 ("지원")와 이전 초안 중 하나를 지원하는 브라우저 ("부분 지원") 만 구별합니다.

브라우저 지원을 최대화하려면 가장 오래된 버전부터 최신 버전까지 모두 포함하면됩니다.

.foo { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 

.bar { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
} 

모든 Android 버전은 현재 이전 2009 속성을 지원하지만 앞으로는 표준 속성을 사용하지 않을 예정입니다. 또한 Blackberry 10은 이전 초안이 아닌 현재 표준을 지원하는 것으로 나와 있습니다.