Mengapa Elemen Melekit Saya Tidak Berfungsi dengan Flexbox?

Elemen Melekit dan Kotak Fleksibel: A Gotcha

Kedudukan melekit, digunakan untuk elemen yang kekal tetap pada kedudukan tertentu semasa menatal, berkelakuan di luar jangkaan apabila digunakan dengan bekas flexbox. Isu ini timbul apabila unsur flexbox lalai untuk meregang, mengakibatkan unsur dengan ketinggian yang konsisten yang tidak boleh ditatal.

Untuk menyelesaikan isu ini, tambahkan align-self: flex-start pada elemen melekit. Atribut ini menetapkan ketinggian elemen kepada auto, membolehkan untuk menatal dan menyelesaikan masalah kedudukan.

Perlu ambil perhatian bahawa sokongan penyemak imbas untuk kedudukan: jadual melekit berbeza-beza. Safari memerlukan awalan -webkit-, manakala Firefox sedang mengalami isu.

Berikut ialah coretan kod yang dilaraskan untuk rujukan:

.flexbox-wrapper {<br> paparan: flex; <br> limpahan: auto;<br> tinggi: 200px;          /<em> Tidak perlu -- contohnya sahaja </em>/<br>}<br>.biasa {<br> warna latar belakang: biru; /<em> Tidak perlu -- contohnya sahaja </em>/<br> ketinggian: 600px;          /<em> Tidak perlu -- contohnya sahaja </em>/<br>}<br>.melekat {<br> kedudukan: -webkit-sticky; /<em> untuk Safari </em>/<br> kedudukan: melekit;<br> atas: 0;<br> align-self: flex-start; /<em> <-- ini ialah pembetulan </em>/<br> warna latar belakang: merah;  /<em> Tidak perlu -- contohnya sahaja </em>/<br>}<br>

Atas ialah kandungan terperinci Mengapa Elemen Melekit Saya Tidak Berfungsi dengan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!