ü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...
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
...) mark-up, Yanıtınız için sabırsızlanıyoruz! Hala flexbox'a destekleyen Safari & iOS Safari tüm sürümlerinde gereklidirorder
üzerine
-webkit
önek, eksik çünkü
, 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