Bagaimanakah Saya Boleh Mencapai Jarak Sama Antara Item Flexbox, Termasuk Yang Pertama dan Terakhir?

Memastikan Jarak Sama dalam Item Flexbox

Apabila menggunakan flexbox untuk menjajarkan elemen, adalah perkara biasa untuk menghadapi situasi yang anda inginkan jarak yang sama antara semua item, termasuk yang pertama dan terakhir .

Isu "Ruang Sekitar"

Isu Sifat CSS justify-content: space-around nampaknya mengagihkan item secara sama rata dengan ruang yang sama di sekelilingnya. Walau bagaimanapun, seperti yang dinyatakan dalam artikel, item pertama mempunyai satu unit ruang pada tepi bekas, menyebabkan jarak antara item tidak sama.

Menyelesaikan Masalah dengan Unsur Pseudo

Satu pendekatan untuk mencapai jarak yang sama melibatkan penggunaan unsur pseudo. Dengan menambahkan ::sebelum dan ::selepas elemen pseudo pada bekas fleksibel, kami boleh memasukkan penanda lebar sifar yang dikira sebagai item fleksibel.

Dengan menggunakan justify-content: ruang-antara dan menentukan lebar sifar untuk elemen pseudo, item flex yang boleh dilihat akan kelihatan sama rata.

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

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

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Jarak Sama Antara Item Flexbox, Termasuk Yang Pertama dan Terakhir?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!