Bagaimanakah Saya Boleh Membuat Item Flexbox Digulung ke Berbilang Baris Sambil Mengekalkan Saiz Berkadar?

Flexbox: Memaparkan Item dalam Berbilang Baris

Dalam flexbox, mencapai reka letak dengan berbilang baris mungkin mencabar. Pertimbangkan senario di mana lapan item dijangka mengubah saiz dan menjajarkan secara dinamik dalam dua baris, dengan empat item setiap baris. Untuk menyelesaikan masalah ini, beberapa pelarasan utama diperlukan.

Pertama sekali, pastikan flex-wrap ditetapkan untuk membalut pada elemen bekas. Ini mengatasi tetapan nowrap lalai, membenarkan item dipecahkan kepada berbilang baris.

Walau bagaimanapun, halangan utama terletak pada flex-grow: 1 sifat yang diberikan kepada item flex. Walaupun harta ini mengagihkan ruang yang tersedia secara berkadar, ia boleh menghalang pembalut. Memandangkan tiada kandungan dalam item flex, ia akan mengecut kepada lebar sifar dan kekal pada satu baris.

Penyelesaiannya ialah dengan menentukan lebar untuk item tersebut. Dengan menggunakan flex: 1 0 21%;, item akan:

• Flex: 1 - Item Flex akan flex untuk mengisi ruang yang ada.
• 0 - Item fleksibel akan mempunyai lebar minimum sifar, membolehkannya mengecut.
• 21% - Item fleksibel akan mempunyai lebar pilihan sebanyak 21%, memastikan ia memuatkan kandungan dan mengedarkan sama rata dalam bekas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Item Flexbox Digulung ke Berbilang Baris Sambil Mengekalkan Saiz Berkadar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!