Bagaimana menggunakan CSS untuk mencapai susun atur dengan lebar yang tidak menentu, jarak yang sama dan ditinggalkan diselaraskan?

Kemahiran susun atur CSS: Melaksanakan susunan elemen dengan lebar yang tidak menentu, jarak yang konsisten dan sejajar kiri

Dalam pembangunan front-end, sering diperlukan untuk menangani susun atur elemen dengan lebar yang berbeza, tetapi jarak yang sama dan selaras kiri. Artikel ini menerangkan cara menggunakan ciri Flexbox CSS untuk menyelesaikan masalah ini dengan cekap.

Katakan anda perlu mengatur pelbagai elemen lebar yang berlainan dalam bekas, yang memerlukan unsur-unsur untuk secara konsisten jarak dan keseluruhan selaras kiri. (Ini boleh dibayangkan sebuah bekas yang mengandungi unsur -unsur lebar yang berbeza, dengan jarak yang sama dan seluruh kiri sejajar).

Dengan Flexbox, anda boleh mencapainya dengan hanya beberapa baris kod CSS:

 .container {
  Paparan: Flex;
  Flex-Wrap: Bungkus;
  Gap: 10px; /* Laraskan nilai ini untuk menukar jarak*/
}

Penjelasan kod:

• display: flex; : Tetapkan bekas ke susun atur Flexbox, dan elemen anaknya secara automatik menjadi projek flex.
• flex-wrap: wrap; : Membolehkan item flex untuk membungkus secara automatik apabila perlu untuk memastikan bahawa unsur -unsur dapat diatur dengan munasabah mengikut lebar kontena.
• gap: 10px; : Tetapkan jarak antara projek flex hingga 10 piksel. Anda boleh menyesuaikan nilai ini seperti yang diperlukan.

Dengan kod CSS ringkas di atas, anda boleh membuat susun atur dengan lebar yang tidak menentu, jarak yang sama dan susun atur sejajar kiri, sesuai untuk pelbagai senario susun atur yang serupa.

Atas ialah kandungan terperinci Bagaimana menggunakan CSS untuk mencapai susun atur dengan lebar yang tidak menentu, jarak yang sama dan ditinggalkan diselaraskan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!