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

Jarak Sama Antara Item Fleksibel

Masalah

Mencapai jarak yang sama di sekeliling kanak-kanak flexbox menimbulkan cabaran, seperti yang diserlahkan dalam artikel sebelumnya di mana justify-content : ruang sekeliling dipersembahkan sebagai penyelesaian yang tidak sempurna. Artikel ini menyelidiki kaedah yang lebih komprehensif untuk memastikan jarak yang sama, termasuk item pertama dan terakhir.

Penyelesaian

Unsur Pseudo

Kemajuan penyemak imbas terkini benarkan unsur pseudo (::sebelum dan ::selepas) dianggap sebagai item lentur dalam bekas lentur. Ini membuka kemungkinan baharu untuk mencipta jarak yang sama.

Dengan menambahkan ::sebelum dan ::selepas unsur pseudo pada bekas dan menggunakan justify-content: ruang-antara, bersama-sama dengan elemen pseudo lebar sifar, kita boleh mencipta ilusi jarak yang sama antara item flex yang boleh dilihat.

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

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

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

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