Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Membuat Item Flexbox Digulung ke Berbilang Baris Sambil Mengekalkan Saiz Berkadar?

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

DDD
Lepaskan: 2024-12-27 09:43:11
asal
1046 orang telah melayarinya

How Can I Make Flexbox Items Wrap to Multiple Rows While Maintaining Proportional Sizing?

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan