Bagaimanakah Saya Boleh Mencipta Grid Square Responsif Menggunakan Flexbox dan CSS?-tutorial css-php.cn

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

Barbara Streisand

Lepaskan： 2024-11-26 04:40:08

asal

525 orang telah melayarinya

How Can I Create a Responsive Square Grid Using Flexbox and 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:

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

Salin selepas log masuk

Grid Responsif

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

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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>

Salin selepas log masuk

.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;
}

Salin selepas log masuk

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!