Rumah >hujung hadapan web >tutorial css >Grid CSS lwn. Flexbox: Mana yang Terbaik untuk Mencipta Petak Responsif?

Grid CSS lwn. Flexbox: Mana yang Terbaik untuk Mencipta Petak Responsif?

Patricia Arquette
Patricia Arquetteasal
2024-12-05 18:26:14596semak imbas

CSS Grid vs. Flexbox: Which is Best for Creating Responsive Squares?

Membuat Reka Letak Grid Responsif dengan Petak Dinamik

Anda berhasrat untuk membina reka letak grid dengan petak responsif, memastikan setiap petak mempunyai ketinggian yang sama dengan lebarnya dan dipisahkan oleh longkang. Untuk mencapai ini, anda sedang mempertimbangkan untuk menggunakan sama ada CSS Grid atau Flexbox.

CSS Grid

Menggunakan CSS Grid, anda boleh menentukan lajur grid dan ketinggian daripada segi empat sama sebagai peratusan luas grid. Berikut ialah contoh:

.square-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
    gap: 10px;
}

.square {
    height: 100%;
}

Flexbox

Dengan Flexbox, anda boleh mencipta reka letak responsif menggunakan sifat flex-wrap. Untuk memastikan segi empat sama mengekalkan nisbah bidang segi empat sama, anda boleh menggunakan helah bawah padding atau mencipta elemen pseudo untuk menetapkan ketinggian yang sesuai.

.square-container {
    display: flex;
    flex-wrap: wrap;
}

.square {
    flex-basis: calc(33.333% - 10px);
    margin: 5px;
    border: 1px solid;
    box-sizing: border-box;
}

.square::before {
    content: '';
    display: block;
    padding-top: 100%;
}

Pertimbangan Tambahan

  • Untuk memusatkan teks dalam petak, anda boleh menggunakan paparan: flex; harta dengan justify-content: pusat; dan align-item: center;.
  • Helah padding-bottom mungkin memberikan hasil yang tidak boleh dipercayai dalam penyemak imbas lama.
  • Untuk memastikan nisbah bidang segi empat sama yang konsisten, letakkan elemen kandungan sepenuhnya dalam petak.

Atas ialah kandungan terperinci Grid CSS lwn. Flexbox: Mana yang Terbaik untuk Mencipta Petak Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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