Bagaimanakah Saya Boleh Membuat Grid Petak Responsif Menggunakan Grid CSS dan Flexbox?

Grid CSS dengan Flexbox untuk Petak Responsif

Mewujudkan grid petak responsif menggunakan Grid CSS dan Flexbox boleh dicapai dengan memahami prinsip utama dan menerapkannya dengan berkesan.

Metodologi:

1. Gunakan Flexbox untuk Pengagihan Mendatar: Flexbox menyediakan fleksibiliti untuk mengagihkan petak secara mendatar sambil mengekalkannya lebar. Laraskan lebar segi empat sama menggunakan lentur atau lebar min.
2. Tentukan Nisbah Aspek Segiempat: Untuk memastikan elemen adalah segi empat sama, tambahkan nisbah aspek : 1 / 1 kepada gaya segi empat sama. Sifat ini memastikan bahawa lebar dan tinggi kekal dalam nisbah 1:1 yang tetap.
3. Tetapkan Ketinggian kepada Auto: Tidak seperti lebar, ketinggian segi empat sama hendaklah ditetapkan kepada auto. Ini membolehkan petak itu menskala secara menegak tanpa memutarbelitkan nisbah bidangnya.
4. Gunakan Flexbox untuk Saiz Semula Ketinggian: Semasa petak berskala menegak, anda mungkin melihat jurang antara mereka. Untuk menghapuskan perkara ini, tambahkan item penjajaran: regangan ke bekas induk, pastikan petak meregang untuk memenuhi ruang menegak yang tersedia.

Pelaksanaan Kod:

Berikut ialah contoh kod yang disemak yang menggabungkannya prinsip:

 paparan: flex;<br> justify-content: space-around ;<br> align-content: regangan;<br>}<br>.flex-item {<br> latar belakang: tomato;<br> jidar: 5px;<br> warna: putih;<br> berat fon: tebal;<br> saiz fon: 1.5em;<br> jajaran teks: tengah; <br> lentur: 1 0 auto;<br> nisbah bidang: 1 / 1;<br> ketinggian: auto;<br>}<br>

 <div class="flex-item">1</div><br> <div> <div class="flex-item">3</div>
<br> <div> <div class="flex-item">5</div>
<br> <div> <div class="flex-item">7</div>
<br>
</div>&gt ;<br>”</div>
</div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Grid Petak Responsif Menggunakan Grid CSS dan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!