Cara memesan dan menyelaraskan item dalam susun atur grid

Tutorial ini menunjukkan mengawal penempatan item dan penjajaran dalam susun atur grid CSS. Kami akan meneroka item pesanan dan menyelaraskannya secara individu dan sebagai satu kumpulan.

Sebelum ini, kami meliputi asas susun atur grid, termasuk penempatan elemen dan algoritma penempatan automatik grid.

Untuk demonstrasi optimum, gunakan versi terkini Firefox (versi 52 atau lebih baru) atau Chrome (versi 57 atau lebih baru), kedua -duanya menawarkan sokongan susun atur grid asli.

Konsep Utama:

Properti

menentukan urutan item dalam grid, mengatasi perintah DOM lalai. Ini sangat membantu dengan item yang banyak atau dinamik ditambah.
• order Penjajaran paksi baris menggunakan
(item individu) dan
• (semua item). justify-self menjajarkan satu item; justify-items menyelaraskan semua item dalam grid. justify-self justify-items Penggunaan Axis Lajur menggunakan
(item individu) dan
• (semua item). Kedua -duanya menerima align-self, align-items, start, dan end nilai. center stretch penjajaran grid keseluruhan dikawal oleh
(paksi baris) dan
• (paksi lajur), digunakan pada bekas grid. Ini menerima justify-content, align-content, start, end, center, stretch, dan space-around. space-between space-evenly

Mengawal pesanan item dengan

: order Harta

menentukan urutan penempatan item. Secara lalai, item mengikuti pesanan DOM mereka. Walau bagaimanapun,

membolehkan susunan yang disesuaikan, terutamanya bermanfaat dengan banyak atau item ditambah secara dinamik. order order Nilai rendah

muncul terlebih dahulu; Item dengan nilai

sama mengekalkan perintah dom mereka. order order

Contoh:

html:

css (coretan ilustrasi):

<div class="container">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item c">C</div>
  <div class="item d">D</div>
  <div class="item e">E</div>
  <div class="item f">F</div>
  <div class="item g">G</div>
  <div class="item h">H</div>
  <div class="item i">I</div>
  <div class="item j">J</div>
</div>

.c { grid-row-start: 1; grid-row-end: 2; }
.e { grid-row-start: 1; grid-row-end: 3; }
.b, .j { order: 2; }
.a, .i { order: 3; }

Ingat: Mengubah pesanan item dengan mungkin mempengaruhi kebolehcapaian. Pembaca skrin dan navigasi papan kekunci mungkin tidak mencerminkan perubahan visual.

order penjajaran paksi baris (

,

): justify-self justify-items

justify-self menyelaraskan item individu, sementara justify-items menyelaraskan semua item di sepanjang paksi baris. Kedua -duanya menggunakan start, end, center, dan stretch.

Penjajaran paksi-paksi lajur (

, ): align-self align-items

menyelaraskan item individu, dan

menyelaraskan semua item di sepanjang paksi lajur, menggunakan

, align-self, align-items, dan start. end Penjajaran grid secara keseluruhan (, center): stretch

justify-content align-content (paksi baris) dan (paksi lajur) menyelaraskan seluruh grid dalam bekasnya. Sebagai tambahan kepada

,

, , dan

, mereka juga menerima

, justify-content, dan align-content. start end center Kesimpulan: stretch space-around space-between Menguasai pesanan item dan penjajaran dalam grid CSS menyediakan kawalan susun atur yang tepat. Ingat pertimbangan kebolehaksesan semasa menyusun semula item. space-evenly

(bahagian Soalan Lazim dikeluarkan untuk keringkasan. Soalan Lazim yang disediakan telah dilindungi dengan baik dalam tutorial yang ditulis semula.)

Atas ialah kandungan terperinci Cara memesan dan menyelaraskan item dalam susun atur grid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!