Bagaimanakah Flexbox Boleh Mencapai Lajur Sama Tinggi dalam Reka Letak CSS?

Lajur Ketinggian Sama dengan CSS: Meneroka Flexbox sebagai Alternatif

Mencari lajur sama ketinggian dalam reka letak CSS boleh membawa kepada cabaran apabila bergantung pada jadual berasaskan peratusan . Untuk menangani isu ini, flexbox menawarkan penyelesaian teguh yang menjamin ketinggian yang sama untuk semua lajur.

Struktur HTML

Struktur HTML kekal sama seperti dalam kod asal:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Yang Dikemaskini CSS

Untuk melaksanakan flexbox bagi lajur ketinggian yang sama, CSS perlu diubah suai:

ul {
  display: flex;
}

Perubahan mudah ini mengubah ul menjadi bekas flex dan anak langsungnya (li) menjadi item fleksibel. Secara lalai, flexbox menggunakan arah lentur: baris untuk menjajarkan item secara mendatar.

Nota untuk Pertimbangan

• Sejajarkan item: regangan

  • Tetapan lalai tambahan bagi item penjajaran: regangan menyebabkan item fleksibel untuk mengembangkan ke ketinggian penuh bekas.

• Ketinggian yang sama hanya digunakan untuk adik beradik

  • Ciri ini hanya mempengaruhi item dalam bekas flex yang sama .

• Ketinggian mengatasi

  • Jika ketinggian ditetapkan secara manual untuk item fleksibel, ia akan mengatasi gelagat ketinggian yang sama.

• Ketinggian yang sama pada baris yang sama

  • Ketinggian yang sama digunakan hanya untuk item lentur pada yang sama baris.

• Melumpuhkan ketinggian yang sama

  • Menetapkan flex-shrink: 1 pada item flex individu boleh melumpuhkan gelagat ketinggian yang sama.

Pelayar Sokongan

Flexbox disokong secara meluas oleh semua penyemak imbas utama kecuali versi IE sebelum 10. Untuk sokongan yang konsisten merentas penyemak imbas, pertimbangkan untuk menggunakan Autoprefixer untuk menambah awalan vendor secara automatik.

Atas ialah kandungan terperinci Bagaimanakah Flexbox Boleh Mencapai Lajur Sama Tinggi dalam Reka Letak CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!