iOS에서 flexbox가 작동하지 않습니다 (주문).

Question

<ul>에는 이미지가 포함 된 여러 개의 목록 항목이 있습니다. <ul>은 더 넓은 화면에 수평으로 표시되지만 모바일에서는 목록 항목의 2를 2로 표시합니다. 원래는 위의 목록에 표시된 float:left; width: 50%;으로 설정했습니다. 그러나 이미지가 로고이고 크기가 다르기 때문에 제대로 보이지 않았으므로 flexbox를 사용하여 목록 항목의 순서를 변경하기로 결정하여 이미지가 다르게 배열되어 더 깔끔하게 보입니다. 내 CSS는 다음과 같습니다 :

ul { 
    overflow: hidden; 
    display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */ 
    display: -moz-box;  /* OLD: Firefox (buggy) */ 
    display: -ms-flexbox; /* MID: IE 10 */ 
    display: -webkit-flex; /* NEW, Chrome 21?28, Safari 6.1+ */ 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    -moz-flex-flow: row wrap; 
    -ms-flex-flow: row wrap; 
    flex-flow: row wrap; 
} 

li { 
    display: block; 
    margin: 0 0 @baseline/2 0; 
    padding: 0; 
    text-align: center; 
    width: 50%; 
} 

li:nth-child(1) {order: 1;} 
li:nth-child(2) {order: 2;} 
li:nth-child(3) {order: 4;} 
li:nth-child(4) {order: 3;} 
li:nth-child(5) {order: 5;} 
li:nth-child(6) {order: 6;} 
li:nth-child(7) {order: 7;} 

li:last-child { 
    clear: left; 
    float: none; 
    margin: 0 auto; 
} 

나는 목록 항목의에 float:left; 있었나요하지만 난 flex-flow: row wrap가 설정되어있는 경우 인 flexbox이 필요하지 않습니다 수집 ... 또는 적어도 그것을해야하지?

위의 CSS는 Chrome, Firefox 및 Opera의 내 iMac에서 올바르게 작동합니다. 사파리와 IOS (사파리)에서는 항목이 재정렬되지 않습니다.

나는 이것이 최신 브라우저, 특히 webkit 및 iOS에서 작동 할 것이라고 생각했습니다. 누구든지 이에 대해 밝힐 수 있습니까?

이 제대로 작동 할 때 로고를 표시하는 방법입니다

...

그리고 이것은 그들이 사파리/아이폰에 표시하는 방법입니다 - 주문 - 당신은 순서가 다른 (잘못 볼 수 있습니다

감사

...) 마크 업, 답장을 기다리겠습니다! 당신은 여전히 ​​인 flexbox을 지원하는 사파리 & iOS의 사파리의 모든 버전에서 필요 order에 -webkit 접두사를 누락하고 있기 때문에

Answer 1

이 작동하지 않습니다. 다른 브라우저의 접두사와 관련하여 flexbox에 대한 지원 차트를 caniuse에서 살펴보십시오.

업데이트에 코드 : 또한

li:nth-child(1) {order: 1; -webkit-order: 1;} 
li:nth-child(2) {order: 2; -webkit-order: 2;} 
li:nth-child(3) {order: 4; -webkit-order: 4;} 
li:nth-child(4) {order: 3; -webkit-order: 3;} 
li:nth-child(5) {order: 5; -webkit-order: 5;} 
li:nth-child(6) {order: 6; -webkit-order: 6;} 
li:nth-child(7) {order: 7; -webkit-order: 7;}