Bagaimanakah Saya Boleh Memaksa Item Flexbox menjadi Dua Baris Tertentu?

Flexbox: Memaparkan Item dalam Dua Baris

Dalam Flexbox, anda boleh mengedarkan item dengan mudah merentas berbilang baris dengan menetapkan flex-wrap: wrap pada bekas. Walau bagaimanapun, untuk memaksa item ke dalam baris tertentu, anda perlu mengawal saiz dan jarak elemen.

Isu Item Saiz Semula Dinamik

Dalam kod yang disediakan, anda mempunyai lapan item dengan flex -grow: 1, yang bermaksud setiap item akan cuba menduduki sebanyak mungkin ruang yang tersedia. Ini boleh menghalang reka letak dua baris yang dikehendaki.

Penyelesaian: Mengawal Lebar Item

Untuk mencipta dua baris empat item setiap satu, anda perlu menentukan lebar tetap untuk elemen anak. Ubah suai gaya kanak-kanak seperti berikut:

.child {
  flex: 1 0 21%; /* Adjust the percentage as needed */
}

• flex: 1 0 21%:

  • 1: Tetapkan flex-grow kepada 1, membenarkan item untuk berkembang
  • 0: Tetapkan pengecutan fleksibel kepada 0, menghalang item daripada mengecut melebihi 21% lebar
  • 21%: Menentukan lebar awal untuk setiap item (anda mungkin perlu melaraskan sedikit nilai ini)

Dengan kedua-dua flex- balut dan lebar item ditentukan, item anda kini akan dijajarkan dengan kemas dalam dua baris empat.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaksa Item Flexbox menjadi Dua Baris Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!