Mengapa Item Flex yang Diposisikan Benar Tidak Dialih Keluar Daripada Aliran Biasa dalam IE11?

Item fleksibel yang diposisikan secara mutlak tidak boleh dialih keluar daripada aliran biasa dalam IE11

Masalah:

Dalam dua div dengan kandungan dan div ketiga dengan kedudukan mutlak di latar belakang Dalam kes ini, bekas adalah kotak fleksibel. Ini berfungsi dengan baik dalam kedua-dua Chrome dan Safari, tetapi Firefox dan IE11 mengambil kira div yang diposisikan secara mutlak dan mengagihkan ruang antara div seolah-olah terdapat tiga div dalam tiga baris.

Analisis:

Firefox menganggap div ketiga yang diposisikan secara mutlak sebagai item flex aliran masuk dan mengambil kira dalam pengiraan ruang antara. (Begitu juga dengan IE11; Chrome dan Edge mengabaikannya.)

Jelas sekali, ini tidak konsisten dengan spesifikasi kotak flex semasa:

4.1. 绝对定位的弹性项

由于它不在流中，一个 flex 容器的绝对定位从属项不会参与 flex 布局。

Penyelesaian:

• Alihkan kedudukan mutlak div

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

• Gunakan susun atur Grid CSS

Susun atur Grid CSS tidak mengambil kira elemen kedudukan mutlak, jadi ia Masalah ini boleh diselesaikan.

Nota:

Untuk Firefox, isu ini telah diselesaikan dalam v52. Walau bagaimanapun, IE11 masih mempunyai masalah ini.

Atas ialah kandungan terperinci Mengapa Item Flex yang Diposisikan Benar Tidak Dialih Keluar Daripada Aliran Biasa dalam IE11?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!