Mengapa Float Tidak Berfungsi dengan Flexbox, dan Apakah Alternatif yang Lebih Baik?

Flexbox dan Float: Gabungan Tidak Stabil

Apabila cuba meletakkan teks di sebelah kanan elemen pengaki dalam bekas flex, menggunakan harta terapung mungkin kelihatan seperti pilihan semula jadi. Walau bagaimanapun, teknik ini menghadapi halangan yang tidak dijangka.

Apabila sifat paparan ditetapkan kepada lentur, sifat apungan untuk mana-mana elemen anak dalam bekas menjadi tidak berkesan. Tingkah laku ini berpunca daripada prinsip asas flexbox.

Flexbox dan Float: Pertembungan Prinsip

Harta apungan digunakan terutamanya dalam reka letak blok tradisional, di mana ia membenarkan elemen untuk menolak kandungan seterusnya. Walau bagaimanapun, dalam bekas fleksibel, algoritma reka letak menggantikan peraturan ini.

Seperti yang dinyatakan dalam spesifikasi flexbox:

Apungan tidak menceroboh ke dalam bekas fleksibel dan jidar bekas fleksibel tidak runtuh dengan margin kandungannya.

Penyelesaian yang Lebih Sesuai: Flex Properties

Daripada bergantung pada sifat float, flexbox menyediakan penyelesaian yang lebih sesuai: harta justify-content. Dengan menetapkan justify-content kepada flex-end, elemen dalam bekas fleksibel akan dijajarkan ke tepi kanan.

Coretan Kod:

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

footer span {
  text-align: right;
}

<footer>
  <span>
    <a>foo link</a>
  </span>
</footer>

Pendekatan yang disemak ini berjaya meletakkan "pautan foo" di sebelah kanan elemen pengaki sambil mengekalkan reka letak fleksibel.

Atas ialah kandungan terperinci Mengapa Float Tidak Berfungsi dengan Flexbox, dan Apakah Alternatif yang Lebih Baik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!