Mengapa Elemen Melekit Saya Berhenti Melekat dalam Bekas Flexbox?

Elemen Melekit Tersangkut Apabila Menggunakan Flexbox

Anda telah menghadapi isu di mana unsur melekit kehilangan kelekitannya apabila diletakkan dalam bekas flexbox . Ini berlaku kerana elemen flexbox secara semula jadi meregang untuk mengisi ruang yang tersedia, menyebabkan semua elemen berkongsi ketinggian yang sama dan menghalang penatalan menegak.

Betulkan: Laraskan Penjajaran

Untuk menyelesaikannya ini, tambahkan "align-self: flex-start" pada elemen melekit. Ini memaksa ketinggian elemen menjadi automatik dan bukannya tetap, membenarkan halaman menatal seperti yang dijangkakan.

Keserasian Pelayar

Walaupun kebanyakan penyemak imbas menyokong pembetulan ini, Safari memerlukan Awalan "-webkit-" untuk kedudukan melekit. Selain itu, kedudukan melekit mungkin menunjukkan isu dengan jadual dalam sesetengah penyemak imbas kecuali Firefox.

Kod Kemas Kini:

.flexbox-wrapper {
  display: flex;
  overflow: auto;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}

Atas ialah kandungan terperinci Mengapa Elemen Melekit Saya Berhenti Melekat dalam Bekas Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!