Soru IE11'deki multiline-flexbox genişlikleri yanlış hesaplanıyor mu?


IE11 esnek malzeme genişliklerini doğru hesaplamazsa flex-wrap: wrap kullanıldı.

Görmek http://jsfiddle.net/MartijnR/WRn9r/6/

4 kutuda her biri esnek tabanlıdır:% 50, yani iki kutudan iki kutu almalıyız, ancak IE11'de her kutu bir satır alır. Kenarlığı 0'a ayarlarken, düzgün çalışır.

Bunun bir hata mı olduğu yoksa IE11'i yapmanın bir yolu varsa (ve hala sınırlar kullanıyorsa) herhangi bir fikir var mı?

<section>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</section>
section {
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
    margin:0;
}
.box {
    border: 1px solid black;
    background: #ccc;
    display: block;
    -ms-flex: 50%;
    -moz-flex: 50%;
    -webkit-flex: 50%;
    flex: 50%;
    box-sizing: border-box;
    margin:0;
}

Not; Projemde popüler tarayıcıların yalnızca son sürümünün desteklenmesi gerekiyor, neyse ki, ama IE11 bunlardan biri.


32
2018-02-21 18:18


Menşei


şüphelenen bir hata bu yüzden de social.msdn.microsoft.com/Forums/ie/en-US/... - Martijn van de Rijdt
Yuvarlama sorunu olabilir. FWIW maksimum% 50 genişlik ayarı bunu düzeltiyor. - David Storey
Kodunuzda yazım hatası var: -moz-webkit-flex. - BoltClock♦
@BoltClock teşekkürler! - Martijn van de Rijdt


Cevaplar:


Bir böcek gibi görünüyor box-sizing kullanarak boyut hesaplanırken dikkate alınmaz. flex özelliği. Sınır 2px kapladığı için,% 50'den daha büyüktür ve dolayısıyla sadece bir çizgiye sığar, böylece tüm kutular tam genişliğe kadar uzatılır. Kenarlığı devre dışı bırakırsanız ve bunun yerine 2px dolgu eklerseniz, aynı şeyi görebilirsiniz.

Ekleyerek sınırları koruyarak düzgün çalışmasını sağlayabilirsiniz. max-width: 50% göre .box Kuralkümesi. Aksi takdirde% 33.34 ile% 49 arasında esnek bir değer kullanabilirsiniz. Bu, genişliği de dahil olmak üzere genişliği% 50'den daha az olacak ve elemanlar kullanılabilir alanı doldurmak için büyüdükçe, hala esnek kabın% 50'si olacaktır. Çirkin bir hack türü, ama kombine bir kenarlık ve% 50'den daha büyük bir dolgu ekledikçe, ayarladığınız esnek değeri ekleyemezsiniz.

Belki de yüzde değerinin doğrudan azaltılmasından daha iyi bir yol kullanmaktır. calc(). Bu, modern Flexbox sözdizimini destekleyen tüm tarayıcılar tarafından desteklenir. Yalnızca, sol ve sağ dolguların ve kenar boşluklarının toplam toplamını kullanmak istediğiniz yüzde değerinden çıkarmanız gerekir. Bunu yaptığınız için, kutu boyutlandırma özelliğine gerçekten ihtiyacınız yoktur, bu nedenle kaldırılabilir. IE'de calc'yi kullanamayacağınız başka bir sorun var gibi görünüyor. flex shorthand ama onu kullanabilirsiniz flex-basis Özellik, istediğiniz hangisidir.

.box {
    border: 1px solid black;
    /* additional styles removed for clarity */

    /* 
    50% - (border-left-width + border-right-width +
           padding-left + padding-right)
    */
    -webkit-flex-basis: calc(50% - 2px);
    flex-basis: calc(50% - 2px);
}

Demoyu görün: http://jsfiddle.net/dstorey/78q8m/3/


34
2018-02-22 05:52



Ne yazık ki, bir maksimum genişlik ekleyerek kutuları daha esnek hale getirmeyecek. - Martijn van de Rijdt
Aslında bir kutu boyutlandırma hatası gibi görünüyor. - Martijn van de Rijdt
İkinci çözüm yine de işe yarayacak. Yukarıdaki çözümünüz Safari ve Firefox'ta çalışmamasına rağmen, bunu kullanarak bunu yapabilirsiniz. Sadece% 25'lik esnekliğin% 25'in altında, ancak bir sonraki küçük boyutun üstünde olduğundan emin olun. Aşağıdaki demoda 25 yerine 50 ve% 23 yerine% 48 kullandım, ancak gerektiği gibi ayarlayabilirsiniz: jsfiddle.net/WRn9r/25 - David Storey
Burada gereksiz önekler ve sınıflar olmayan bir sürüm jsfiddle.net/WRn9r/26 - David Storey
İkinci değerin bir sürümünü, yalnızca% değerini düşürmekten ve esnek temele geçmekten ziyade calc kullanarak ekledim. - David Storey


Microsoft'tan Rob'den bir çözüm aldım. Görmek http://social.msdn.microsoft.com/Forums/ie/en-US/8145c1e8-6e51-4213-ace2-2cfa43b1c018/ie-11-flexbox-with-flexwrap-wrap-doesnt-seem-to-calculate- genişlikleri-doğru-boxsizing-gözardı? forumu = iewebdevelopment

Bir min-width ve değişiyor flex:auto Kutuların davranmasını sağlar, flexiness.

Görmek http://jsfiddle.net/MartijnR/WRn9r/23/ ve geçici çözüm ile biraz daha gelişmiş bir örnek için aşağıdakini:

<section>
    <div class="box fifty">1</div>
    <div class="box twentyfive">2</div>
    <div class="box twentyfive">3</div>
    <div class="box fifty">4</div>
    <div class="box fifty">5</div>
</section>


section {
    display: -moz-webkit-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
    margin:0;
}
.box {
    border: 1px solid black;
    background: #ccc;
    display: block;
    box-sizing: border-box;
    margin:0;
    -ms-flex: auto;
    -moz-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.fifty {
    min-width: 50%;
}
.twentyfive {
    min-width: 25%;
}

9
2018-02-22 16:46



Bu cevap diğerleri için en yararlı olacağından, doğru olarak işaretliyorum. Umarım bu, stackoverflow görgü kurallarına aykırıdır. - Martijn van de Rijdt
Bu artık Safari'de çalışmıyor. Sarılmıyor. Ayrıca tutarsız sonuçlara da sahiptir. Firefox'ta üçüncü bir satıra geçer. - David Storey
BTW önek olmadan IE11 uygular gibi ms önekleri gerekli değildir. IE10 farklı bir sözdizimi kullanır ve bunu bir ekranla etkinleştirmediniz: -ms-flexbox; neyse. Firefox önek olmadan son sözdizimini uyguladığı için -moz-önekleri de gerekli değildir. - David Storey
haklısın. Teşekkürler David! Cevabınızı doğru olarak işaretleyecektir! - Martijn van de Rijdt


Philip Walton'ın bu hatanın mükemmel bir özeti var: https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box. En kolayını ayarlamak için iki çözüm önerdi flex-basis: auto ve ilan etmek width yerine. (Değil max-width veya min-width.) Bu çözüm, sizin calc() dolgu veya kenarlık genişliğini değiştirdiğinizde.


7
2018-04-06 13:52



Neden olmasın min-width? İyi çalışıyor gibi görünüyor. - Langdon
çok kullanışlı bağlantı! - ithil


Bu açıkça bir IE hatasıdırorijinal [doğru] CSS'yi bırakın ve IE10 + 'yı hedefleyen bir saldırı ekleyin:

/* IE10+ flex fix: */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .box {
        flex: 0;
        min-width: 50%;
    }
}

http://jsfiddle.net/stedman/t1y8xp2p/


5
2018-04-24 22:23