Mengapakah IE11 Menyertakan Item Flex yang Diposisikan Benar-Benar dalam Pengiraan Susun Atur?

Item Flex yang Diposisikan Benar-Benar Dipertimbangkan dalam Aliran dalam IE11

Isu

Dalam bekas flexbox dengan dua div berisi kandungan dan satu div latar belakang yang diposisikan secara mutlak , IE11 (dan Firefox sebelum versi 52) faktor dalam div kedudukan mutlak apabila mengira agihan ruang. Tingkah laku ini menyimpang daripada spesifikasi flexbox, yang menyatakan bahawa item yang diposisikan secara mutlak tidak mengambil bahagian dalam reka letak flex.

Penyelesaian

Pindahkan Div yang Diposisikan Benar

Penyelesaian yang mungkin adalah untuk mengalihkan div yang berkedudukan mutlak antara dua div yang lain, seperti yang digambarkan di bawah:

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>
</div>

Gunakan Flex Wrap

Selesai lain ialah menggunakan flex wrap untuk memaksa item yang diposisikan secara mutlak membalut ke baris baharu. Ini menghalangnya daripada menjejaskan pengedaran ruang item lain:

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

Dalam Firefox (Sehingga v52): Override Default Behavior

Untuk Firefox (sebelum versi 52), sifat CSS ini boleh digunakan untuk mengatasi tingkah laku lalai dan mengalih keluar div yang diposisikan secara mutlak daripada aliran:

.container {
    display: -moz-box;  /* Firefox specific property */
    -moz-box-orient: horizontal;  /* Firefox specific property */
}

Atas ialah kandungan terperinci Mengapakah IE11 Menyertakan Item Flex yang Diposisikan Benar-Benar dalam Pengiraan Susun Atur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!