Bagaimana untuk Mencapai Jarak Konsisten dalam Flexbox?

Jarak Sama dalam Flexbox: Merapatkan Jurang

Satu cabaran biasa dalam flexbox ialah mencapai jarak yang sama antara item, termasuk yang pertama dan terakhir. Walaupun sifat 'justify-content: space-around' semakin hampir, ia mewujudkan ketidakseimbangan visual disebabkan oleh jarak yang tidak sekata.

Menyelesaikan Dilema Jarak

Nasib baik, ada ialah dua kaedah yang berkesan untuk memastikan pengagihan ruang sama rata.

Kaedah 1: Elemen Pseudo

Pelayar moden menganggap ::sebelum dan ::selepas elemen pseudo sebagai item fleksibel. Dengan menambahkannya pada bekas, kita boleh menggunakan 'justify-content: space-antara' untuk mencipta ilusi jarak yang sama. Elemen pseudo menduduki lebar sifar, meninggalkan ruang yang sama antara item fleksibel yang boleh dilihat.

Kod HTML:

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

Kod CSS:

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

flex-container::before,
flex-container::after {
  content: "";
}

Kaedah 2: Offset Jarak

Kaedah lain melibatkan mencipta jarak mengimbangi menggunakan jidar atau padding. Pendekatan ini berfungsi dengan lebih konsisten merentas penyemak imbas tetapi mungkin memerlukan pelarasan CSS tambahan.

Kod HTML:

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

Kod CSS:

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

flex-item {
  margin-left: 10px;
  margin-right: 10px;
}

/* Remove margin from first and last items */
flex-container > :first-child {
  margin-left: 0;
}
flex-container > :last-child {
  margin-right: 0;
}

Kedua-dua kaedah secara berkesan menyamakan jarak antara item flex, memberikan susunan visual yang seragam.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Jarak Konsisten dalam Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!