Bagaimana untuk Mencapai Jarak Sama Antara Item Flex?

Jarak Sama Antara Item Flex

Mencari kaedah untuk membahagikan ruang yang sama antara item flexbox, walaupun yang awal dan akhir? Artikel ini meneroka penyelesaian untuk mencapai pengedaran yang diingini ini.

Satu pendekatan melibatkan memanfaatkan elemen pseudo bersama-sama dengan kandungan justify: ruang-antara harta. Teknik ini mengeksploitasi fakta bahawa penyemak imbas menganggap elemen pseudo sebagai item fleksibel dalam bekas fleksibel. Dengan menambahkan elemen ::before dan ::after pada bekas, anda pada asasnya mencipta ruang letak halimunan yang mengambil bahagian dalam pengagihan ruang.

Coretan di bawah menunjukkan pelaksanaan kaedah ini:

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

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

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

Ini dengan berkesan menghasilkan item flex dengan jarak yang sama, dengan padding yang sama pada kedua-dua belah setiap item, termasuk yang paling luar. Walaupun pendekatan ini menawarkan penyelesaian yang disokong dengan baik, pendekatan ini mungkin tidak sejajar dengan semua kes penggunaan.

Untuk alternatif yang lebih serba boleh, pertimbangkan nilai ruang sekeliling untuk kandungan justify. Walaupun ia menghasilkan jarak visual yang tidak sama rata antara item (disebabkan setiap item mempunyai ruang yang sama pada kedua-dua belah), ia memastikan semua item mengekalkan jarak yang konsisten dari tepi bekas.

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

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Jarak Sama Antara Item Flex?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!