Bagaimanakah Flexbox Boleh Mencapai Lajur Ketinggian Sama Dalam CSS?

Penyelesaian Flxexbox untuk Lajur Ketinggian Sama dalam CSS

Dalam kod anda, anda cuba menggunakan jadual dengan peratusan untuk lajur ketinggian yang sama. Walau bagaimanapun, pendekatan ini mungkin menghadapi cabaran. Sebagai alternatif yang berdaya maju, pertimbangkan untuk memanfaatkan Flexbox.

HTML:

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

CSS:

ul {
  display: flex;
}

Dengan pelaksanaan Flexbox yang mudah ini, anda boleh memastikan bahawa setiap item senarai mengekalkan ketinggian yang sama, tanpa mengira ketinggiannya kandungan.

Cara Ia Berfungsi:

• Paparan: sifat lentur pada
  elemen mengisytiharkannya sebagai bekas fleksibel.
  • Secara lalai, bekas fleksibel menyusun elemen anaknya (item fleksibel) secara mendatar.
  • Item penjajaran lalai: sifat regangan mengarahkan item fleksibel untuk menduduki ketinggian penuh bekas, menghasilkan ketinggian yang sama lajur.

  Nota:

  • Lajur ketinggian sama Flexbox hanya digunakan pada elemen adik beradik.
  • Menetapkan ketinggian tertentu pada item flex mengatasi fungsi ketinggian sama.
  • Lajur ketinggian sama berfungsi hanya dalam satu baris.
  • Untuk melumpuhkan gelagat ketinggian sama dalam Flexbox, gunakan align-item: flex-start atau align-item: flex-end.

  Sokongan Penyemak Imbas:

  Flexbox disokong secara meluas merentas penyemak imbas moden, termasuk Chrome, Firefox, Safari dan Edge. Untuk pelayar lama seperti IE < 10, pertimbangkan untuk menggunakan awalan vendor untuk memastikan keserasian. Alat seperti Autoprefixer boleh mengautomasikan proses ini.

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