Mengapakah `flex-direction: column-reverse` Menyebabkan Isu Tatal dalam Firefox, Edge dan IE?

Isu Tatal Flexbox column-reverse dalam Firefox, Edge dan IE

Apabila cuba mencipta aplikasi responsif dengan senarai div dipaparkan dengan tatal ke atas pada skrin yang lebih besar dan tatal ke bawah dengan susunan terbalik pada skrin yang lebih kecil, menggunakan sifat flexbox 'column-reverse' kelihatan seperti penyelesaian yang ideal. Walau bagaimanapun, ia membawa kepada isu pelik dalam penyemak imbas selain Chrome.

Struktur HTML dan Penggayaan CSS

HTML terdiri daripada div 'senarai' yang mengandungi siri bahagian 'item'. CSS memperuntukkan 'display: flex' dan 'flex-direction: column-reverse' kepada div 'list', memastikan item disusun secara menegak dan diterbalikkan. Sifat ketinggian dan 'overflow-y' mendayakan tatal menegak dan sempadan telah ditambahkan untuk kejelasan visual.

Gelagat Tatal Merentas Penyemak Imbas

Dalam Chrome, senarai ' ' div memaparkan bar skrol berfungsi, membenarkan pengguna menatal ke atas untuk melihat item sebelumnya. Walau bagaimanapun, dalam Firefox, Edge dan IE11, bar skrol muncul tetapi kekal dilumpuhkan, menghalang penatalan.

Penjelasan Pepijat

Penyiasatan mendedahkan bahawa kelakuan ini ialah pepijat dalam Firefox , Edge dan IE11. Apabila menggunakan 'arah flex: column-reverse' dan 'overflow-y: auto', bar skrol tiada.

Penyelesaian

Jika sifat 'lajur' digunakan dan bukannya 'column-reverse', bar skrol menjadi berfungsi dalam semua penyemak imbas. Sifat 'justify-content: flex-end' juga diperlukan untuk menjajarkan item di bahagian bawah div 'senarai' untuk menatal ke bawah yang betul.

Maklumat Tambahan

Maklumat lanjut tentang isu ini boleh didapati dalam sumber berikut:

• Pepijat 1042151 - flex-direction: column-reverse (atau "flex-direction:column; justify-content:flex-end ") dengan limpahan-y: auto tidak boleh ditatal
• Philip Walton / flexbugs - Lajur-terbalik dan limpahan-y tidak boleh ditatal

Atas ialah kandungan terperinci Mengapakah `flex-direction: column-reverse` Menyebabkan Isu Tatal dalam Firefox, Edge dan IE?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!