Bolehkah Kami Mengagihkan Ruang Secara Merata Di Sekitar Kanak-kanak Flexbox?

Ruang Sama Antara Item Flex: Panduan Komprehensif

Bolehkah Kami Mengagihkan Ruang Secara Merata Di Sekitar Kanak-kanak Flexbox?

Mencapai sama rata jarak di sekeliling kanak-kanak flexbox boleh dicapai dengan beberapa pendekatan.

Justify-Content: Space-Around

Seperti yang dinyatakan dalam soalan, justify-content: space-around mengedarkan item secara sama rata dengan ruang yang sama di sekelilingnya. Walau bagaimanapun, ini boleh mengakibatkan jarak visual tidak sekata disebabkan ruang tambahan pada setiap sisi item.

Penyelesaian Sokongan Penyemak Imbas Penuh: Pseudo-Elements

Pelayar moden mengenali pseudo -elemen pada bekas lentur sebagai item lentur. Dengan menambahkan ::before dan ::after pseudo-elements pada bekas anda dan menetapkan justify-content: space-antara, bersama-sama elemen pseudo-lebar sifar, anda boleh menjarakkan item flex yang boleh dilihat secara sama rata. Kaedah ini disokong oleh semua penyemak imbas utama.

Contoh Kod

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

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

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

Pendekatan ini memberikan jarak yang sama antara item, termasuk item pertama dan terakhir.

Atas ialah kandungan terperinci Bolehkah Kami Mengagihkan Ruang Secara Merata Di Sekitar Kanak-kanak Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!