Bagaimanakah Saya Boleh Mencipta Grid CSS Responsif Sepenuhnya bagi Petak Menggunakan Flexbox?

Css Grid of Squares with Flexbox

Matlamatnya adalah untuk mencipta grid responsif sepenuhnya bagi petak menggunakan CSS dan Flexbox, di mana petak berskala dan melaraskan dengan sempurna agar sesuai dengan lebar viewport, sambil mengekalkan nisbah bidang segi empat sama tanpa mengira ketinggian viewport.

Membuat Petak Segi empat

Untuk memastikan segi empat sama mengekalkan bentuk segi empat sama, kami memanfaatkan sifat nisbah aspek CSS. Sifat ini membolehkan kami menentukan nisbah aspek intrinsik unsur, dengan itu mengekalkan dimensinya. Berikut ialah CSS yang dikemas kini:

.flex-item {
  aspect-ratio: 1 / 1;
}

Kini, segi empat sama akan sentiasa mengekalkan nisbah aspek segi empat samanya.

Menskala Segiempat

Untuk menskala petak dengan sewajarnya, kami menggunakan harta flex dalam Flexbox. Sifat flex bertanggungjawab untuk mengawal kelakuan elemen dalam bekas flexnya. Begini cara kami menggunakannya:

.flex-item {
  flex: 1 0 auto;
}

• flex: 1 bermakna setiap segi empat sama akan mengambil jumlah ruang yang sama dalam bekas.
• 0 bermakna segi empat sama tidak akan mengecil di bawah saiz asalnya.
• auto bermaksud petak akan membesar untuk mengisi yang tersedia ruang.

Memelihara Kesesuaian Mendatar

Walaupun dengan Flexbox, segi empat sama mungkin membalut kepada berbilang baris jika port pandangan menjadi terlalu sempit. Untuk mengelakkan ini, kami menetapkan sifat justify-content bagi bekas flex kepada space-round. Ini memastikan bahawa segi empat sama diagihkan dan dibenarkan dalam bekas tanpa membalut.

CSS yang dikemas kini untuk bekas flex:

.flex-container {
  justify-content: space-around;
}

Keputusan Akhir

Dengan melaksanakan teknik ini , kini kita boleh membuat grid CSS segi empat sama yang menskala dan melaraskan dengan sempurna agar sesuai dengan lebar port pandangan. Petak itu mengekalkan nisbah aspek segi empat samanya tanpa mengira ketinggian port pandangan, memastikan reka letak yang konsisten dan menarik secara visual.

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