CSS Flexbox vs Grid: Sistem Tata Letak Mana Yang Patut Anda Gunakan?

Peraturan Satu Ayat

Gunakan Flexbox apabila anda menyusun item dalam satu hala (baris atau kolum). Gunakan CSS Grid apabila anda perlu mengawal susun atur dalam dua hala sekaligus (baris dan kolum secara serentak).

Itulah sebenarnya keseluruhan keputusannya. Segala-galanya yang lain adalah penjelasan tentang mengapa peraturan itu berkesan dalam praktis.

Apa yang Flexbox sebenarnya bagus lakukan

Flexbox direka untuk mengagihkan ruang di sepanjang satu paksi. Ciri utamanya ialah item boleh membesar, mengecil, dan dibungkus secara semula jadi tanpa anda perlu menetapkan dimensi tepat untuk setiap satunya.

Ini adalah kes di mana Flexbox adalah pilihan yang betul:

• Bar navigasi — barisan pautan di mana anda mahu item tertentu ditolak ke kanan (margin-left: auto) atau jarak yang sekata (justify-content: space-between)
• Baris kad di mana setiap kad mempunyai ketinggian yang sama tanpa mengira panjang kandungan (align-items: stretch mengendalikan ini secara automatik)
• Memusatkan elemen secara mendatar dan menegak di dalam bekas — tiga baris CSS: display: flex; justify-content: center; align-items: center
• Kumpulan butang, kombinasi ikon + label, dan sebarang komponen di mana anak elemen perlu duduk bersebelahan dengan sedikit jarak
• Senarai bungkusan di mana anda mahu item dibungkus ke baris seterusnya apabila tiada lagi ruang (flex-wrap: wrap)

.navbar {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.navbar .logo { margin-right: auto; }
/* logo kekal di kiri, pautan kekal di kanan */

Apa yang CSS Grid sebenarnya bagus lakukan

Grid direka untuk susun atur dua dimensi — anda menentukan kedua-dua baris dan kolum, dan anda boleh meletakkan item dengan tepat ke dalam sel, merentangi pelbagai baris atau kolum, dan mencipta jurang dalam kedua-dua hala.

Ini adalah kes di mana Grid adalah pilihan yang betul:

• Susun atur halaman — header, sidebar, kandungan utama, footer semuanya diletakkan secara relatif antara satu sama lain
• Susun atur majalah atau papan pemuka (dashboard) di mana item yang berbeza mengambil jumlah ruang yang berbeza
• Galeri imej dengan struktur grid yang konsisten tanpa mengira saiz imej
• Susun atur borang di mana label dan input perlu selaras secara mendatar dan menegak
• Sebarang susun atur di mana anda berfikir tentang baris DAN kolum pada masa yang sama

.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    min-height: 100dvh;
}

Contoh Bersebelahan: Grid Kad

Inilah di mana kekeliruan berlaku. Kedua-dua sistem boleh menghasilkan barisan kad:

.card-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.card { flex: 1 1 280px; }

.card-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

Kedua-duanya berfungsi. Versi Grid biasanya lebih disukai di sini kerana auto-fill dengan minmax memberi anda tingkah laku kolum yang lebih boleh diramal — setiap kolum mempunyai lebar yang sama tepat, dan grid mengalir semula dengan kemas. Versi Flexbox adalah lebih baik apabila kad boleh mempunyai lebar yang berubah-ubah dan anda mahu mereka menggunakan ruang yang ada dengan lebih lancar.

Perbezaan Penjajaran

Dalam Flexbox, anda menjajarkan item di sepanjang paksi utama (hala yang anda pilih) dan paksi silang (berserenjang dengannya). Anda tidak boleh mengawal kedudukan sel secara bebas dalam grid baris dan kolum yang halimunan.

Dalam Grid, setiap item tinggal dalam satu sel dengan kedudukan baris dan kolum. Anda boleh meletakkan item pada baris 2, kolum 3 secara eksplisit, atau biarkan pelayar menempatkannya secara automatik. Flexbox tidak mempunyai konsep sel — item hanya mengalir mengikut hala yang anda nyatakan.

Kesilapan Biasa

Menggunakan Grid untuk pemusatan ringkas: display: flex; align-items: center; justify-content: center adalah lebih pantas daripada menyediakan grid untuk satu elemen tunggal. Flexbox menang pada tugas paksi tunggal.

Menggunakan Flexbox untuk susun atur halaman penuh: Sebaik sahaja anda mempunyai lebih daripada dua komponen yang perlu berkaitan dengan kedudukan antara satu sama lain (header + sidebar + kandungan + footer), ketiadaan paksi kedua dalam Flexbox menjadi masalah. Grid mengendalikan ini dengan kawasan bernama.

Menggunakan kolum Flexbox sebagai pengganti baris Grid: flex-direction: column membolehkan item disusun secara menegak, tetapi anda kehilangan keupayaan untuk menjajarkan kandungan merentasi pelbagai kolum secara serentak. Jika anda berfikir tentang kolum, bertukar kepada Grid.

Menggunakan Kedua-duanya Sekali Gus

Grid dan Flexbox tidak saling eksklusif. Corak dunia nyata yang paling biasa ialah Grid untuk susun atur tahap halaman, Flexbox di dalam setiap bahagian:

• Grid menentukan kedudukan sidebar, header, dan kawasan kandungan utama
• Di dalam navigasi (yang terletak di kawasan header), Flexbox mengendalikan baris logo + pautan + butang CTA
• Di dalam kawasan kandungan utama, grid kad menggunakan Grid untuk struktur kolum
• Di dalam setiap kad, Flexbox mengendalikan susun atur ikon + teks + butang

Corak komposisi ini — Grid untuk struktur, Flexbox untuk komponen — adalah cara kebanyakan rangka kerja CSS moden (Tailwind, Bootstrap) berfungsi secara dalaman.

Rujukan Ciri Pantas