Menguasai Reka Letak Fleksibel: CSS Flexbox VS Grid untuk Reka Bentuk Responsif

Siaran ini meneroka pelbagai kaedah untuk mencipta senarai kad yang responsif dan diedarkan secara mendatar menggunakan CSS Flexbox dan Grid. Kami akan menangani cabaran untuk mengekalkan saiz dan jarak kad yang konsisten merentas saiz skrin yang berbeza.

Jadual Kandungan

• Jadual Kandungan
• Cabarannya
• CSS Flexbox: Senarai Kad Fleksibel
• Pengagihan Kad Sekata dengan flex-grow dan flex-basis
• Grid CSS: Penyelesaian Responsif
• Ringkasan

Cabarannya

Komponen galeri atau senarai selalunya memerlukan kad (artikel, produk, imej) untuk disesuaikan dengan lebar bekas. Setiap kad harus mengubah saiz secara berkadar, mengekalkan ketinggian, lebar dan jarak yang sama. Reka letak seharusnya mengalir semula dengan lancar merentas pelbagai saiz skrin.

Struktur HTML asas dan CSS minimum mungkin pada mulanya menghasilkan pengedaran kad yang tidak sekata:

CSS Flexbox: Senarai Kad Fleksibel

Flexbox menawarkan pendekatan yang mudah. flex-wrap: wrap membolehkan pembalut ke baris baharu dan gap mengawal jarak:

<code class="language-css">.list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}</code>

Ini menghasilkan aliran mendatar:

Walau bagaimanapun, menetapkan lebar tetap untuk .item (width: 100px;) menghalang kad daripada berkembang untuk mengisi ruang yang tersedia, meninggalkan jurang:

Menggunakan sifat justify-content (seperti space-between, space-around, dll.) tidak menyelesaikan masalah pengagihan sekata dengan sempurna:

Agihan Kad Sekata dengan flex-grow dan flex-basis

flex-basis menetapkan saiz kad awal, manakala flex-grow: 1 (atau flex: 1) membenarkan pertumbuhan berkadar:

<code class="language-css">.item {
  /* other styles */
  flex: 1;
  flex-basis: 100px;
}</code>

Ini meningkatkan pengedaran, tetapi kad terakhir mungkin masih mengembang tidak sekata:

Grid CSS: Penyelesaian Responsif

Grid CSS menyediakan penyelesaian yang lebih mantap. display: grid dan gap digunakan sama seperti Flexbox:

<code class="language-css">.list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}</code>

Untuk responsif, grid-template-columns dengan auto-fit, minmax() dan repeat() adalah kunci:

<code class="language-css">.item {
  /* other styles */
  flex: 1;
  flex-basis: 100px;
}</code>

Ini mencipta reka letak responsif sepenuhnya:

Ringkasan

Kedua-dua Flexbox dan Grid menawarkan keupayaan susun atur yang berkuasa. Flexbox cemerlang dalam susun atur satu dimensi, manakala Grid bersinar untuk kawalan dua dimensi. Memilih alat yang betul bergantung pada keperluan reka bentuk khusus.

Selamat pengekodan! ?

? Ketahui tentang Vue 3 dan TypeScript dengan buku baharu saya Learning Vue!

? Hubungi saya di X | LinkedIn.

Suka siaran ini? Kongsikan! ?? ?

Atas ialah kandungan terperinci Menguasai Reka Letak Fleksibel: CSS Flexbox VS Grid untuk Reka Bentuk Responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!