Mengapa Item Flex yang Diposisikan Benar Mempengaruhi Tata Letak dalam IE11?

Item Flex yang Diposisikan Benar-Benar Termasuk dalam Aliran Normal dalam IE11

Dalam susun atur kotak flex, elemen disusun dalam satu baris atau lajur berdasarkan sifat lentur. Walau bagaimanapun, apabila elemen dalam kotak flex diposisikan secara mutlak, ia menjadi elemen keluar aliran dan tidak sepatutnya mengambil bahagian dalam reka letak.

Dalam contoh kod yang disediakan:

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

Div ".bg" diletakkan secara mutlak. Walaupun begitu, dalam IE11, ruang antara item flex diedarkan seolah-olah div ".bg" adalah sebahagian daripada aliran biasa. Ini adalah sisihan daripada spesifikasi flexbox.

Penyelesaian:

Untuk menyelesaikan isu ini, satu penyelesaian ialah mengalihkan div ".bg" yang diposisikan secara mutlak antara yang lain dua item fleksibel:

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

Dengan perubahan struktur ini, div ".bg" tidak lagi mempengaruhi pengagihan ruang antara item fleksibel dan reka letak yang diingini dicapai.

Atas ialah kandungan terperinci Mengapa Item Flex yang Diposisikan Benar Mempengaruhi Tata Letak dalam IE11?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!