Pelajari teknologi flexbox CSS3 dan bina reka letak halaman web yang lancar dengan mudah.

Pelajari teknologi flexbox CSS3 dan bina reka letak halaman web yang lancar dengan mudah

Dalam reka bentuk web moden, reka letak halaman web adalah bahagian yang penting. Reka letak halaman web yang baik boleh menjadikan halaman web kelihatan lebih lancar dan lebih cantik. Pada masa lalu, kami biasanya menggunakan teknik reka letak tradisional, seperti menggunakan atribut apungan atau kedudukan untuk melaksanakan reka letak halaman web. Walau bagaimanapun, kaedah tradisional ini sering menghasilkan reka letak yang tidak cukup fleksibel untuk menyesuaikan diri dengan saiz skrin dan peranti yang berbeza. Teknologi flexbox yang disediakan dalam CSS3 boleh menyelesaikan masalah ini.

flexbox ialah model susun atur terkini dalam CSS3, yang berasaskan konsep flexbox. Menggunakan flexbox, kita boleh mengawal kedudukan, saiz dan susunan pelbagai elemen dalam susun atur halaman web dengan mudah. Di bawah, saya akan memperkenalkan beberapa sifat flexbox yang biasa digunakan dan kod sampel untuk membantu semua orang memahami dan menguasai teknologi ini dengan lebih baik.

1. Bekas dan Item

Dalam flexbox, kami memanggil elemen induk reka letak web sebagai bekas, dan elemen anak dalam reka letak dipanggil item. Kedua-dua bekas dan item mempunyai beberapa sifat biasa yang digunakan untuk mengawal reka letak.

• Atribut kontena

  • paparan: digunakan untuk mentakrifkan bekas menggunakan reka letak flex, nilai lalai ialah flex.
  • arah-flex: digunakan untuk menentukan arah susunan item, nilai lalai ialah baris.
  • flex-wrap: digunakan untuk menentukan kaedah pembalut baris item, nilai lalai ialah nowrap.
  • justify-content: digunakan untuk mentakrifkan penjajaran item pada paksi utama, nilai lalai ialah flex-start.
  • item sejajar: digunakan untuk mentakrifkan penjajaran item pada paksi silang, nilai lalai ialah regangan.
  • align-content: digunakan untuk menentukan penjajaran susun atur berbilang baris, nilai lalai ialah regangan.

• Sifat item

  • order: digunakan untuk menentukan susunan item, nilai lalai ialah 0.
  • flex-grow: digunakan untuk menentukan nisbah pembesaran item, nilai lalai ialah 0.
  • flex-shrink: digunakan untuk menentukan nisbah pengecutan item, nilai lalai ialah 1.
  • flex-basis: digunakan untuk menentukan ruang yang diduduki oleh item dalam bekas, nilai lalai ialah auto.
  • flex: atribut singkatan yang digunakan untuk mentakrifkan tiga atribut di atas.

2. Contoh Reka Letak Asas

Yang berikut menunjukkan contoh susun atur halaman web asas dengan dua projek:

Kod HTML:

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
</div>

Kod CSS:

we

.container {
  display: flex;
}

.item {
  flex: 1;
  background-color: #ccc;
  padding: 20px;
  margin: 10px;
}

yang digunakan dalam contoh flex ruang untuk barang. Memandangkan item semuanya mempunyai nilai sifat fleksibel 1, item tersebut membahagikan ruang bekas yang tersedia secara sama rata. Pada masa yang sama, dalam gaya kelas .item, kami juga mentakrifkan warna latar belakang, jidar dalam dan jidar luar item.

Contoh pemusatan mendatar dan menegak

Menggunakan flexbox, kita boleh mencapai kesan susun atur mendatar dan menegak dengan mudah. Di bawah menunjukkan contoh susun atur halaman web sejajar tengah:

Kod HTML:

<div class="container">
  <div class="item">居中对齐</div>
</div>

Kod CSS:

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

.item {
  background-color: #ccc;
  padding: 20px;
}

Dalam contoh di atas, kami menggunakan atribut justify-content dan align-item untuk menyelaraskan tengah item pada utama dan kapak silang. Pada masa yang sama, kami juga menggunakan bekas dengan ketinggian tertentu untuk memastikan item dipusatkan secara menegak.

Ringkasan

Dengan mempelajari teknologi flexbox CSS3, kami boleh membina reka letak halaman web yang licin dan fleksibel dengan mudah. Melalui penggunaan fleksibel sifat kontena dan projek, kami boleh mencapai pelbagai kesan susun atur. Saya berharap kod sampel di atas dapat membantu semua orang memahami dan menguasai teknologi flexbox dengan lebih baik, serta boleh menggunakannya secara fleksibel dalam reka bentuk web masa hadapan.

Atas ialah kandungan terperinci Pelajari teknologi flexbox CSS3 dan bina reka letak halaman web yang lancar dengan mudah.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!