Meneroka sifat susun atur panel CSS: flex dan grid

Penerokaan sifat reka letak panel CSS: flex dan grid

Dalam pembangunan web moden, reka letak ialah aspek yang penting. Pada masa lalu, kami menggunakan lebar dan ketinggian tetap untuk mengawal reka letak, tetapi dengan peningkatan reka bentuk responsif, kami memerlukan kaedah susun atur yang lebih fleksibel dan adaptif. CSS menyediakan beberapa sifat susun atur yang berkuasa, yang paling biasa digunakan ialah flex dan grid. Artikel ini akan memperkenalkan cara menggunakan kedua-dua sifat ini dan memberikan contoh kod khusus.

1. susun atur fleksibel

reka letak fleksibel ialah mod reka letak fleksibel yang diperkenalkan dalam CSS3. Ia meletakkan elemen kanak-kanak dalam bekas pada paksi utama dan susun aturnya mengikut peraturan peruntukan ruang pada paksi utama. Berikut ialah beberapa atribut lentur yang biasa digunakan:

• paparan: lentur;: Tetapkan bekas kepada reka letak lentur
• arah lentur: Tentukan arah paksi utama, yang boleh menjadi baris (arah mendatar lalai), lajur (menegak arah), baris- terbalik (arah mendatar terbalik) atau lajur-terbalik (arah menegak terbalik)
• justify-kandungan: Tentukan penjajaran elemen anak pada paksi utama, yang boleh menjadi flex-start (start alignment), flex- hujung (penjajaran hujung) ), tengah (dijajarkan di tengah), ruang-antara (diselaraskan pada kedua-dua hujung, dengan jarak yang sama di tengah) atau ruang-keliling (dijajarkan di kedua-dua hujung, dengan jarak yang sama antara sub-elemen)
• item-align: Tentukan kedudukan elemen kanak-kanak pada Penjajaran paksi silang, yang boleh menjadi mula-lentur (penjajaran atas), hujung-lentur (penjajaran bawah), tengah (penjajaran tengah), garis dasar (penjajaran garis dasar) atau regangan ( penjajaran regangan)
• flex-wrap: Tentukan sama ada elemen anak membalut , boleh menjadi nowrap (tiada balut baris, lalai), balut (line wrap) atau balut-balik (reverse line wrap)

Berikut ialah flex mudah contoh susun atur:

<style>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

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

2. susun atur grid

susun atur grid ada dalam CSS3 Satu lagi sistem susun atur yang berkuasa. Ia membahagikan bekas kepada baris dan lajur dan menentukan di mana sel elemen kanak-kanak harus diletakkan. Berikut ialah beberapa atribut grid yang biasa digunakan:

• paparan: grid;: Tetapkan bekas kepada susun atur grid
• grid-template-columns: Tentukan bilangan dan lebar lajur, anda boleh menggunakan piksel (px), peratusan ( %), atau Anda boleh menggunakan automatik (auto) atau pecahan (fr)
• grid-template-rows: Tentukan bilangan dan ketinggian baris, penggunaannya adalah sama seperti di atas
• grid-column-gap: Tentukan jurang antara lajur
• grid-row-gap: Tentukan jarak antara baris
• grid-template-aas: Tentukan nama setiap sel, ditakrifkan dengan menggunakan matriks pengecam literal

Berikut ialah contoh reka letak grid mudah:

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item {
  background-color: #ddd;
  padding: 10px;
}
</style>

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

Ringkasnya Seperti yang dinyatakan di atas, flex dan grid adalah sifat susun atur yang biasa digunakan dalam pembangunan web moden. Mereka menyediakan keupayaan reka letak yang berkuasa yang membolehkan kami membuat reka letak yang fleksibel dan mudah suai. Dengan menggunakan atribut ini secara rasional, kami boleh mengawal reka letak halaman web dengan lebih baik dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Meneroka sifat susun atur panel CSS: flex dan grid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!