Mengapa Terapung Tidak Berfungsi Di Dalam Bekas Flex?

Float Tidak Berfungsi dalam Bekas Fleksibel: Dijelaskan

Dalam bidang pembangunan web, sifat terapung ialah alat yang berharga untuk menjajarkan elemen dalam halaman web. Walau bagaimanapun, apabila ia berkaitan dengan bekas lentur, sifat terapung menghadapi isu yang ingin tahu.

Masalahnya

Apabila bekas fleksibel digunakan, sifat terapung itu kelihatan menjadi tidak berkesan untuk elemen dalam bekas. Ini boleh membingungkan, terutamanya bagi mereka yang biasa menggunakan apungan untuk mencapai penjajaran tertentu.

Penjelasan

Sebab fenomena ini terletak pada asas flexbox susun atur. Mengikut spesifikasi flexbox, bekas flex mewujudkan konteks pemformatan flex baharu untuk kandungannya. Konteks ini berbeza daripada konteks pemformatan blok standard dalam beberapa cara.

Satu perbezaan utama ialah cara sifat apungan dikendalikan. Dalam bekas fleksibel, sifat apungan diabaikan begitu sahaja. Ini kerana apungan boleh mengganggu susun atur sedia ada bekas fleksibel, mengganggu keupayaannya untuk mengagihkan ruang secara berkesan antara item fleksibelnya.

Penyelesaian

Kepada mencapai penjajaran elemen yang dikehendaki dalam bekas flex, adalah perlu untuk menggunakan sifat yang ditentukan oleh modul flexbox. Daripada bergantung pada apungan, sifat seperti justify-content dan align-item hendaklah digunakan untuk mengawal penjajaran item di sepanjang paksi utama dan paksi silang.

Contoh

Pertimbangkan kod HTML berikut:

<footer>

Dalam ini contoh, kami mahu "pautan foo" diletakkan di sudut kanan pengaki. Menggunakan apungan tidak akan berfungsi dalam keadaan ini. Sebaliknya, kita boleh menggunakan sifat flex:

footer {
  display: flex;
  justify-content: flex-end;
}

Kod ini memastikan bahawa "pautan foo" dijajarkan ke kanan dalam bekas fleksibel, tanpa memerlukan sifat apungan.

Atas ialah kandungan terperinci Mengapa Terapung Tidak Berfungsi Di Dalam Bekas Flex?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!