Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Mencipta Grid Square Responsif Menggunakan Flexbox dan CSS?

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:

  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;
}
Salin selepas log masuk

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;
}
Salin selepas log masuk
  1. 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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan