Bagaimanakah Saya Boleh Menghilangkan Jurang Antara Item Flex yang Dibalut dalam Bekas Flexbox?

Hapuskan Jurang Antara Item Fleksibel yang Dibalut

Apabila menyusun elemen dalam bekas menggunakan Flexbox, jurang boleh muncul antara item apabila ia membalut ke berbilang baris . Untuk menangani isu ini, kita perlu memahami konsep selaras-kandungan.

selaras-kandungan: Kunci kepada Jarak

Pada mulanya, bekas lentur lalai untuk menjajarkan-kandungan: regangan. Ini mengagihkan item secara sama rata di sepanjang paksi silang, yang bertanggungjawab untuk jarak menegak dalam bekas fleksibel menegak. Untuk menghapuskan jurang, kita perlu mengatasi lalai ini dengan align-content: flex-start.

Mengedarkan Talian Flex

align-content terpakai pada multi-line flex bekas, menjajarkan garisan lentur (baris atau lajur) di sepanjang paksi silang apabila terdapat ruang tambahan. Perbezaan ini penting daripada item jajar, yang secara khusus menjajarkan item fleksibel individu dalam satu baris.

Menetapkan kandungan penjajaran: mula-lentur

Dengan menetapkan penjajaran- kandungan: flex-start pada bekas, kami dengan berkesan menolak garisan flex ke bahagian atas ruang yang tersedia, menghapuskan jurang antara mereka. Ini memastikan item disusun secara menegak tanpa sebarang pemisahan yang tidak perlu.

Contoh Kod

Berikut ialah contoh cara melaraskan kod yang disediakan:

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  flex-direction: column;
  background-color: #ccc;
  align-content: flex-start;
}

Dengan memasukkan align-content: flex-start, kami boleh mencapai susun atur yang bersih dan padat tanpa jurang antara item flex dibalut, menghasilkan susunan bertindan yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghilangkan Jurang Antara Item Flex yang Dibalut dalam Bekas Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!