Bagaimana Saya Boleh Mencapai Saiz Item Konsisten dalam Flexbox?

Saiz Item Flexbox Penalaan Halus untuk Kekonsistenan

Dalam Flexbox, elemen pada mulanya diagihkan dengan ruang yang sama di antara mereka, yang boleh membawa kepada item memaparkan lebar yang tidak konsisten. Untuk memastikan saiz seragam, ikuti langkah berikut:

1. Tetapkan Asas Flex kepada Sifar:

Tetapkan sifat asas-flex item kepada sifar. Ini menyatakan bahawa semua elemen harus bermula dengan saiz asas yang sama, tanpa mengira kandungannya.

2. Benarkan Pertumbuhan dan Pengecutan:

Gunakan sifat flex dengan nilai 1 1 0px. Tetapan ini membenarkan elemen berkembang atau mengecut dalam ruang yang tersedia mengikut saiz berkadarnya.

Contoh Kod:

.item {
  flex: 1 1 0px;
  flex-grow: 1; /* Allow growth */
  flex-shrink: 1; /* Allow shrinkage */
}

Pengubahsuaian ini memastikan semua item dalam Bekas Flexbox mempunyai titik permulaan yang sama dan boleh melaraskan saiznya secara berkadar untuk mengekalkan konsistensi.

Sementara IDE atau linter mungkin mencadangkan bahawa unit "px" untuk sifat flex-basis adalah berlebihan, ia adalah perlu untuk pemaparan yang betul dalam Internet Explorer. Oleh itu, kekalkan unit "px" untuk keserasian merentas penyemak imbas.

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