Memahami Tinggi dan Lebar dalam Flexbox
Flexbox membenarkan anda menetapkan lebar elemen menggunakan sifat lentur. Walau bagaimanapun, ia tidak mengawal ketinggian unsur. Flexbox akan lalai untuk mengagihkan ketinggian yang tersedia secara sama rata antara elemen.
Membuat Grid Square
Untuk mencapai grid segi empat sama, kedua-dua ketinggian dan lebar segi empat sama mesti sama. Untuk melakukan ini:
.flex-item { aspect-ratio: 1 / 1; }
Grid Responsif
Untuk mencipta grid responsif yang melaraskan secara automatik kepada lebar port pandangan :
.flex-item { flex: 1 0 auto; }
.flex-container { width: 100%; max-width: 800px; }
Kod Lengkap
<body> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> </div> </body>
.flex-container { width: 100%; max-width: 800px; display: flex; justify-content: space-around; height: 50px; line-height: 30px; } .flex-item { background: tomato; margin: 5px; color: white; font-weight: bold; font-size: 1.5em; text-align: center; flex: 1 0 auto; aspect-ratio: 1 / 1; }
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Grid Square Responsif Menggunakan Flexbox dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!