Tutorial HTML: Cara menggunakan Flexbox untuk susun atur responsif ketinggian yang sama

Tutorial HTML: Cara menggunakan Flexbox untuk susun atur responsif sama ketinggian

Pengenalan:
Dalam pembangunan web moden, reka letak responsif ialah konsep yang sangat penting. Dengan penggunaan peranti mudah alih yang meluas, halaman web kami perlu dapat menyesuaikan diri dengan saiz skrin yang berbeza dan mengekalkan pengalaman pengguna yang baik. Reka letak Flexbox ialah alat berkuasa dalam CSS yang boleh digunakan untuk melaksanakan reka letak responsif ketinggian yang sama. Tutorial ini akan mengajar anda cara menggunakan Flexbox dan memberikan contoh kod khusus.

1. Apakah reka letak Flexbox ialah model reka letak baharu yang diperkenalkan dalam CSS3, yang digunakan untuk menyediakan cara yang fleksibel untuk menjajarkan, menyusun dan mengedarkan item dalam bekas. Berbanding dengan susun atur berasaskan model kotak tradisional, susun atur Flexbox lebih fleksibel dan berkuasa. .

flex-direction: row;

Atribut ini digunakan untuk menentukan arah paksi utama elemen anak dalam bekas Flex. Lalai ialah arah mendatar.

justify-content: center;

Atribut ini digunakan untuk menentukan penjajaran elemen anak dalam arah paksi utama. Boleh ditetapkan ke tengah ke tengah menjajarkan elemen kanak-kanak.
1. 
   align-item: center;
Atribut ini digunakan untuk menentukan penjajaran elemen anak dalam arah paksi silang. Boleh ditetapkan ke tengah untuk menjajarkan elemen kanak-kanak secara menegak dalam bekas.
2. 
   flex-grow: 1;
Atribut ini digunakan untuk mentakrifkan kebolehskalaan elemen kanak-kanak. Boleh ditetapkan kepada 1 untuk menjadikan elemen kanak-kanak membahagikan ruang yang tinggal sama rata.
3. 
   
3. Gunakan Flexbox untuk melaksanakan reka letak responsif ketinggian sama
4. Di bawah kami menggunakan contoh kod khusus untuk menunjukkan cara menggunakan Flexbox untuk melaksanakan reka letak responsif ketinggian sama. Katakan kita mempunyai halaman web yang memerlukan tiga lajur yang sama ketinggian dalam saiz skrin yang berbeza.
   
Kod HTML:

5. <div class="container">
     <div class="column">Column 1</div>
     <div class="column">Column 2</div>
     <div class="column">Column 3</div>
   </div>

   
   Kod CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.column {
  flex-grow: 1;
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

Dalam kod di atas, kami mula-mula mencipta bekas dan menetapkannya untuk menggunakan susun atur Flexbox. Kami kemudian menggunakan atribut

untuk menjajarkan elemen anak di tengah dalam bekas. Akhir sekali, kami mentakrifkan kebolehskalaan elemen kanak-kanak sebagai 1 supaya ia sama-sama membahagikan ruang yang tinggal dan mengekalkan ketinggian yang sama.

4. Ringkasan

Susun atur Flexbox ialah alat yang sangat berkuasa dan fleksibel yang boleh digunakan untuk mencapai pelbagai keperluan susun atur yang kompleks. Dalam tutorial ini, kami memperkenalkan sifat asas reka letak Flexbox dan menyediakan contoh kod konkrit untuk menunjukkan cara menggunakan Flexbox untuk melaksanakan susun atur responsif ketinggian malar. Saya harap tutorial ini akan membantu anda memahami dan menguasai reka letak Flexbox.

Rujukan:

justify-content: center;和align-items: center;MDN Web Docs: Flexbox

Css Trik: Panduan Lengkap untuk Flexbox

Atas ialah kandungan terperinci Tutorial HTML: Cara menggunakan Flexbox untuk susun atur responsif ketinggian yang sama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!