Mengapa Elemen Melekit Saya Tidak Berfungsi dalam Bekas Flexbox?

Flexbox Gotcha: Kedudukan: Elemen Melekit Berkelakuan Tidak Dijangka

Pembangun sering menghadapi tingkah laku yang tidak dijangka apabila menggunakan kedudukan: melekit dalam bekas flexbox. Secara lalai, elemen flexbox meregang untuk mengisi ruang yang tersedia, menghasilkan ketinggian yang sama untuk semua elemen, yang menghalang penatalan dan menjadikan elemen melekit tidak berfungsi.

Penyelesaian terletak pada mengubah suai sifat jajaran-diri elemen melekit untuk flex-start, yang menetapkan semula ketinggiannya kepada auto. Ini membolehkan penatalan dan membenarkan elemen melekit melekat pada kedudukan yang dimaksudkan.

Contoh:

Dalam kod berikut, elemen melekit tidak berfungsi dengan betul sehingga menjajar- diri: flex-start telah ditambahkan:

<div>
<pre class="brush:php;toolbar:false">.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;
}
.sticky {
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}

Pelayar Sokongan:

• align-self: flex-start disokong dalam semua penyemak imbas utama, kecuali Safari, yang memerlukan awalan -webkit-:

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

Dengan melaksanakan pembetulan ini, pembangun boleh memastikan kedudukan itu: elemen melekit berkelakuan seperti yang dimaksudkan dalam flexbox bekas.