Bagaimanakah Saya Boleh Mencipta Grid Square Responsif Menggunakan Flexbox dan CSS?

Css Grid of Squares with Flexbox

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:

1. Tetapkan Nisbah Aspek: Sifat nisbah aspek CSS boleh digunakan untuk menentukan nisbah tetap antara lebar dan tinggi. Untuk segi empat sama, tetapkan nisbah bidang kepada 1 / 1.

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

Grid Responsif

Untuk mencipta grid responsif yang melaraskan secara automatik kepada lebar port pandangan :

1. Tetapkan fleksibel kepada 1 0 auto: Ini membolehkan elemen berkembang agar sesuai dengan lebar tetapi menghalangnya daripada mengecut di bawah lebar asalnya.

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

2. Tetapkan Lebar Bekas: Tentukan lebar tetap atau peratusan untuk bekas induk untuk mengehadkan jumlah lebar grid.

.flex-container {
  width: 100%;
  max-width: 800px;
}

Kod Lengkap

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

.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!