Bagaimanakah Saya Boleh Mencipta Grid CSS Dataran Sempurna Menggunakan Flexbox?

Grid CSS Petak Menggunakan Flexbox

Dalam coretan kod yang anda berikan, anda telah mencipta grid petak menggunakan flexbox. Walau bagaimanapun, ia tidak berbentuk segi empat sama dan ia juga menukar ketinggiannya apabila ketinggian port pandangan berubah.

Untuk mencapai reka letak yang anda inginkan, anda perlu menggunakan sifat CSS bernama nisbah aspek pada setiap elemen segi empat sama. Sifat nisbah aspek memaksa elemen untuk mengekalkan nisbah lebar kepada ketinggian tertentu. Dalam kes anda, anda mahu petak anda adalah segi empat sama, jadi anda harus menetapkan nisbah bidang kepada 1 / 1.

Begini rupa kod anda yang dikemas kini:

.flex-item {
  aspect-ratio: 1 / 1;
  /* Rest of your styles here */
}

Oleh menetapkan sifat nisbah bidang, segi empat sama anda akan sentiasa mengekalkan bentuk segi empat sama, tanpa mengira lebar atau tinggi port pandangan.

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