2015-01-12 55 views
7

üzerine (sipariş) tüm görüntüyü içeren birkaç liste öğelerine sahip bir <ul> var. yatay geniş ekranlarda ancak mobil üzerinde <ul> görüntüler Listenin maddelik en 2 2'yle Başlangıçta ben liste maddelik en büyük çalıştı üzerinde float:left; width: 50%; set ile bunu gösterir. görüntüler logo ve doğru bakmadı tüm boyutları farklı Fakat, bu yüzden liste maddelik o kadar görüntü en düzenlenmiştir farklı yeniden sıralamak flexbox'a kullanmaya karar ve kıvrımlara görünüyordu. Benim CSS aşağıdaki gibidir:FlexBox çalışmıyor iOS

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; 
} 

Listenin maddelik en üstünde float:left; var ama ben flex-flow: row wrap ayarlanırsa FlexBox buna ihtiyacı yok toplamak ... ya da en azından öyle değil ki?

Yukarıdaki CSS Chrome, Firefox ve Opera benim iMac çalışıyor. Safari'de ve IOS'da (Safari) öğeler yeniden sıralanmaz.

Ben bu son tarayıcıları, özellikle webkit ve iOS üzerinde çalışmak düşündüm - Herkes bu konuda bazı ışık tutabilir?

Bu doğru çalışırken logolar göstermesi gerekir nasıl

...

How the logos should display

Ve bu onların Safari/iPhone nasıl görüntüleneceğini - sipariş - Eğer sıralaması farklı (yanlış görebilirsiniz

teşekkür

How they display on Safari/iOs

...) mark-up, Yanıtınız için sabırsızlanıyoruz! Hala flexbox'a destekleyen Safari & iOS Safari tüm sürümlerinde gereklidir order üzerine -webkit önek, eksik çünkü

+0

, tüm önekleri gerekli mi veya sadece '-webkit' ve varsayılan görüntü özelliğini kullanabilir mi? Bunu duydum belki de -ms ve -moz gerçekten bir şey yapmıyor mu? Aynı şekilde 'sipariş' ile , tüm önek versiyonları sadece '-webkit-order',' -moz-order', '-ms-order' ve' order' nelerdir? – user1406440

cevap

12

İşe yaramıyor. Diğer tarayıcıların önekleriyle ilgili olarak, caniuse adresindeki esnek kutu için bir destek tablosuna bakın.

Güncelleme için kod: Ayrıca

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;} 
+0

Çok teşekkürler, bunu denediğime emindim ve işe yaramadı - belli ki değil! Sorunun -webkit-box/-webkit-flex ile olduğunu düşündüm. Şerefe! – user1406440