Bagaimana untuk Mengagihkan Ruang Tersedia Sama Sama dalam Kanak-Kanak Flexbox dengan Ketinggian Berbeza-beza?

Mengisi Ruang yang Tersedia dalam Flexbox Kanak-kanak dengan Ketinggian Yang Berbeza

Masalah:

Dalam dua -letak flexbox lajur, kanak-kanak dengan ketinggian yang berbeza cenderung untuk menjajarkan ketinggian kanak-kanak yang paling tinggi. Bagaimanakah kita boleh mengagihkan ruang yang ada secara sama rata di kalangan kanak-kanak, tanpa mengira kandungan mereka?

Penyelesaian:

Secara lalai, baris flexbox mengagihkan ruang secara sama rata antara kanak-kanak dengan meregangkannya secara menegak . Untuk mengelakkan perkara ini dan membenarkan kanak-kanak menduduki ruang berdasarkan kandungan mereka, kami boleh menetapkan sifat align-item kepada flex-start:

#container {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

Penjelasan:

Menetapkan item penjajaran: flex-start menjajarkan kanak-kanak ke tepi atas bekas, membolehkan mereka mengisi ruang yang tersedia secara menegak berdasarkan kandungan mereka sendiri. Dengan cara ini, setiap kanak-kanak menempati ruang yang berkadar dengan kandungannya, bukannya sepadan dengan ketinggian kanak-kanak paling tinggi dalam barisan.

Nota:

Adalah penting untuk ambil perhatian bahawa flex-start hanya akan menjejaskan penjajaran menegak kanak-kanak dalam baris. Sifat flex-wrap akan terus membalut baris seperti yang diperlukan untuk menampung ruang yang tersedia.

Atas ialah kandungan terperinci Bagaimana untuk Mengagihkan Ruang Tersedia Sama Sama dalam Kanak-Kanak Flexbox dengan Ketinggian Berbeza-beza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!