Penjelasan terperinci tentang jarak dan kaedah pemprosesan ruang putih dalam susun atur fleksibel CSS Flex

. Apabila menggunakan reka letak Flex, anda sering menghadapi masalah dengan menetapkan jarak dan menangani ruang putih. Artikel ini akan memperincikan cara mengendalikan jarak dan ruang kosong dalam reka letak Flex dan memberikan contoh kod khusus.

1. Tetapkan jarak

Gunakan atribut margin
Anda boleh menggunakan atribut margin untuk menetapkan jarak antara elemen, seperti yang ditunjukkan di bawah:

.flex-container {
  display: flex;
}

.flex-item {
  margin: 10px;
}

1. Menggunakan atribut flex
   Kita juga boleh menggunakan atribut flex untuk menetapkan jarak antara elemen. Atribut ini ialah nilai yang serupa dengan nisbah penskalaan anjal Dengan mengawal nilai atribut fleksibel elemen, kita boleh mencapai tetapan penskalaan lebar dan jarak antara elemen. Contohnya adalah seperti berikut:

.flex-item {
  flex: 1 1 auto;
  margin-right: 10px;
}

Dalam kod di atas, kami menetapkan nilai sifat fleksibel kelas .flex-item kepada 1 1 auto, yang bermaksud nisbah penskalaan elastik bagi elemen .flex-item ialah 1. Apabila terdapat tambahan Apabila ruang tersedia, ia diperuntukkan dalam nisbah 1:1, dan apabila ruang tidak mencukupi, ia dilaraskan secara automatik. Dan kami juga menetapkan jarak yang betul antara elemen kepada 10px melalui atribut margin-right.

2. Gunakan elemen anak Flex kosong
   Jika anda ingin menetapkan jarak tetap dalam susun atur Flex, tetapi tidak mahu menggunakan atribut margin atau atribut flex, maka anda boleh menggunakan elemen anak Flex kosong untuk mencapainya . Contohnya adalah seperti berikut:

.flex-container {
  display: flex;
}

.flex-item {
  flex-grow: 0;
  flex-shrink: 0;
  width: 10px;
}

.flex-item:not(:last-child) {
  margin-right: 20px;
}

Dalam kod di atas, kami mencipta elemen .flex-item dengan lebar 10px, dan kemudian tetapkan jarak yang betul kepada 20px melalui sifat margin-kanan. Dengan cara ini, apabila berbilang elemen .flex-item disusun dalam bekas .flex-container, akan terdapat ruang 20px di antara mereka.

2. Deal with blanks
3. Dalam Flex layout, kadang-kadang kita perlu berurusan dengan blank untuk menjadikan layout lebih cantik dan kemas. Berikut adalah beberapa kaedah yang biasa digunakan.
   

Anda boleh menggunakan atribut justify-content untuk melaraskan penjajaran mendatar elemen anak dalam bekas Flex untuk mengendalikan ruang putih. Contohnya adalah seperti berikut:

.flex-container {
  display: flex;
  justify-content: space-between;
}

1. Menggunakan atribut align-item
   Begitu juga, kita juga boleh menggunakan atribut align-item untuk melaraskan penjajaran menegak elemen kanak-kanak dalam bekas Flex untuk mengendalikan ruang putih. Contohnya adalah seperti berikut:

.flex-container {
  display: flex;
  align-items: center;
}

Kod di atas menyusun elemen kanak-kanak dalam bekas .flex-container dengan cara berpusat menegak, supaya ruang kosong di bahagian atas dan bawah bekas boleh diproses.

2. Gunakan atribut flex-wrap
   Biasanya, sub-elemen dalam bekas Flex akan secara automatik membalut agar sesuai dengan ruang yang ada Jika anda mahu sub-elemen tidak membalut dan disusun dengan padat, anda boleh menggunakan flex-wrap atribut untuk melumpuhkan pembalut automatik. Contohnya adalah seperti berikut:

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

Kod di atas menetapkan elemen kanak-kanak dalam bekas .flex-container supaya tidak membalut, supaya elemen kanak-kanak boleh disusun padat dan ruang putih boleh diproses.

Kesimpulan:
3. Apabila menggunakan susun atur CSS Flex, adalah sangat penting untuk menetapkan jarak dan mengendalikan ruang kosong. Artikel ini memperkenalkan tiga kaedah menetapkan jarak, termasuk menggunakan atribut margin, atribut flex dan elemen anak Flex kosong. Pada masa yang sama, tiga kaedah pengendalian ruang putih juga diperkenalkan, termasuk menggunakan atribut justify-content, atribut align-item dan atribut flex-wrap. Saya harap kaedah ini dapat membantu anda menggunakan reka letak Flex dengan lebih baik dan mencapai reka letak halaman web yang cantik.
   
(Nota: Contoh kod di atas hanya untuk menggambarkan konsep. Jika anda ingin menerapkannya dalam amalan, anda perlu menyesuaikannya mengikut situasi tertentu.)

Atas ialah kandungan terperinci Penjelasan terperinci tentang jarak dan kaedah pemprosesan ruang putih dalam susun atur fleksibel CSS Flex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!