Pilihan grid CSS dan Flexbox bergantung kepada keperluan susun atur. 1. Untuk pengaturan mudah "satu baris dan satu lajur", seperti bar navigasi atau kumpulan butang, Flexbox lebih sesuai; 2. Untuk susun atur kompleks yang memerlukan baris dan lajur mengawal secara serentak, seperti papan pemuka atau dinding gambar, grid lebih berkuasa; 3. Jika penjajaran pelbagai dimensi diperlukan, grid memberikan kawalan yang lebih baik, sementara Flex memerlukan bersarang tambahan; 4. Dari segi keserasian, Flexbox digunakan lebih awal dan lebih luas, lengkung pembelajaran grid sedikit lebih curam tetapi mempunyai fungsi yang lebih kuat; 5. Dalam amalan, kedua -duanya sering digunakan bersama, Flexbox mengendalikan susunan dalam komponen, dan grid mengawal struktur keseluruhan.

CSS Grid dan Flexbox adalah alat yang sangat praktikal ketika datang ke susun atur web. Mereka masing -masing mempunyai senario khusus mereka sendiri. Grid lebih sesuai untuk susun atur dua dimensi (kawalan baris dan lajur pada masa yang sama), dan Flexbox lebih sesuai untuk susunan satu dimensi (sama ada secara mendatar atau menegak) . Yang mana yang hendak dipilih bergantung pada struktur yang ingin anda laksanakan.

1. Lihat jika susun atur adalah "satu baris, satu lajur" atau "berbilang baris, pelbagai lajur"

Jika susun atur yang akan anda lakukan hanyalah satu baris butang, bar navigasi, atau beberapa elemen yang diatur dari kiri ke kanan atau atas ke bawah, maka Flexbox adalah pilihan yang lebih mudah dan lebih mudah .

Sebagai contoh, bar navigasi mudah:

 <nav class = "flex-container">
  <a href = "#"> home </a>
  <a href = "#"> artikel </a>
  <a href = "#"> tentang </a>
</nav>

CSS yang sepadan mungkin:

 .flex-container {
  Paparan: Flex;
  Justify-Content: Space-antara;
}

Dan jika ia adalah susun atur yang kompleks seperti papan pemuka dan dinding gambar yang memerlukan secara serentak mengawal baris dan lajur, grid CSS lebih sesuai . Anda boleh menentukan dengan tepat ketinggian setiap baris dan lebar setiap lajur, dan letakkan kandungan pada kedudukan yang ditentukan.

2. Sama ada untuk menyelaraskan kandungan pelbagai dimensi

Walaupun Flexbox boleh menyesuaikan penjajaran spindle dan paksi silang, reka bentuk asalnya adalah susunan satu dimensi. Jika anda mahu elemen menjadi fleksibel dalam arah mendatar dan menegak, Grid memberikan kawalan yang lebih baik .

Sebagai contoh, jika anda mahu pelbagai modul di rantau untuk membungkus garisan secara automatik di bawah saiz skrin yang berbeza, dan mengekalkan jarak dan penjajaran seragam, ia akan menjadi sangat mudah untuk menulis grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) .

Menggunakan Flex untuk mencapai kesan yang sama tidak begitu intuitif, dan struktur bersarang tambahan mungkin diperlukan.

3. Keserasian dan keluk pembelajaran

Pada masa ini, pelayar arus perdana menyokong Grid dan Flexbox, tetapi dalam beberapa projek lama, Flexbox muncul lebih awal dan mempunyai pelbagai penggunaan yang lebih luas . Jika anda mengambil alih sistem lama, anda mungkin melihat lebih banyak jejak flex.

Dari perspektif pembelajaran, Flexbox lebih cepat untuk bermula kerana ia hanya peduli tentang satu arah; Walaupun grid mempunyai sedikit konsep, seperti grid-baris, grid-lajur, kawasan, dan lain-lain, yang mudah dikelirukan pada mulanya.

Tetapi sebaik sahaja anda mendapatkannya, anda akan mendapati bahawa grid sangat kuat apabila membina struktur halaman lengkap. Sebagai contoh, susun atur halaman asas berikut:

 .container {
  paparan: grid;
  grid-template-kawasan:
    "Header Header"
    "kandungan bar sisi"
    "Footer Footer";
}

Kaedah susun atur semantik seperti ini akan lebih mengelirukan untuk dilaksanakan dalam Flex.

Secara umum, memilih grid atau flexbox tidak semestinya menjadi isu sama ada. Dalam banyak projek moden, kedua -duanya digunakan dalam kombinasi: Flexbox mengendalikan susunan dalaman komponen, dan grid mengawal struktur halaman keseluruhan .

Pada dasarnya itu sahaja. Memutuskan berdasarkan keperluan sebenar adalah lebih penting daripada menghafal.

Atas ialah kandungan terperinci Memilih antara grid CSS dan Flexbox untuk susun atur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!