Panduan untuk sifat susun atur penyesuaian CSS: flex dan grid

Panduan sifat susun atur penyesuaian CSS: flex dan grid

Pengenalan:
Dalam pembangunan web moden, reka bentuk responsif telah menjadi trend reka bentuk yang tidak boleh diabaikan. Untuk menampung pelbagai saiz skrin dan jenis peranti, CSS menyediakan beberapa sifat susun atur, dua yang paling biasa digunakan ialah flexbox dan grid. Artikel ini akan memperkenalkan cara menggunakan kedua-dua sifat ini, termasuk contoh kod khusus.

1. Atribut susun atur Flexbox

1. paparan: flex
   Ini ialah atribut kemasukan flexbox, digunakan untuk menentukan elemen yang akan dibentangkan dalam susun atur flexbox. Dengan menetapkan paparan: flex, elemen anak bagi elemen induk akan secara automatik menjadi item fleksibel dan disusun dalam satu baris.

Contoh kod:

.container {
  display: flex;
}

2. flex-direction
   Harta ini menentukan arah susunan item flex, lalai ialah baris (disusun dari kiri ke kanan). Nilai lain boleh menjadi baris-terbalik, lajur (atas ke bawah), atau lajur-terbalik.

Contoh kod:

.container {
  flex-direction: column;
}

3. justify-content
   digunakan untuk melaraskan penjajaran item flex pada paksi utama. Nilai yang biasa digunakan termasuk flex-start (lalai, dijajarkan dari awal), tengah (dijajarkan di tengah), flex-end (dijajarkan di hujung), dan ruang-antara (ruang antara Item diagihkan sama rata), dsb. .

Contoh kod:

.container {
  justify-content: center;
}

4. align-item
   Harta ini digunakan untuk melaraskan penjajaran item flex pada paksi silang. Nilai yang biasa digunakan termasuk flex-start (lalai, atas-aligned), tengah (center-aligned), flex-end (bawah-aligned), regangan (regang pada ketinggian yang sama dengan bekas), dsb.

Contoh kod:

.container {
  align-items: center;
}

5. flex-wrap
   Properti ini digunakan untuk mengawal sama ada flex item wrap. Secara lalai, balut item flex secara automatik Anda boleh menggunakan nilai atribut nowrap untuk mengelakkan pembalut.

Contoh kod:

.container {
  flex-wrap: wrap;
}

2. Atribut susun atur grid

1. paparan: grid
   Ini ialah atribut kemasukan susun atur grid, digunakan untuk menentukan elemen yang akan dibentangkan dalam reka letak grid. Dengan menetapkan paparan: grid, elemen anak unsur induk akan secara automatik menjadi item grid dan dibentangkan mengikut grid.

Contoh kod:

.container {
  display: grid;
}

2. grid-template-columns dan grid-template-rows
   Dua sifat ini digunakan untuk menentukan saiz dan bilangan lajur dan baris grid. Anda boleh menentukan saiz dengan menentukan lebar atau peratusan tertentu, atau anda boleh menggunakan fungsi ulangan untuk menentukan saiz berulang kali.

Contoh kod:

.container {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px repeat(2, 1fr);
}

3. grid-gap
   Harta ini digunakan untuk menetapkan saiz jurang antara item grid. Saiz jurang boleh ditakrifkan dengan menentukan nilai atau peratusan piksel tertentu.

Contoh kod:

.container {
  grid-gap: 20px;
}

4. justify-item dan align-item
   Dua sifat ini digunakan untuk melaraskan penjajaran item grid dalam sel grid masing-masing. justify-item mengawal penjajaran mendatar, dan align-item mengawal penjajaran menegak.

Contoh kod:

.container {
  justify-items: center;
  align-items: center;
}

5. grid-auto-flow
   Hartanah ini digunakan untuk melaraskan cara penyemak imbas meletakkan semua item grid apabila bekas grid tidak dapat menampungnya. Nilai yang biasa digunakan termasuk baris (diletakkan mengikut baris), lajur (diletakkan mengikut lajur), padat (pengisian grid yang dioptimumkan), dsb.

Contoh kod:

.container {
  grid-auto-flow: column;
}

Kesimpulan:
Flexbox dan Grid ialah alatan reka letak yang sangat berkuasa dalam CSS moden, dan ia memberikan kemudahan yang hebat untuk reka bentuk responsif. Dengan menggunakan sifat ini secara fleksibel, kami boleh membuat reka letak dengan mudah yang menyesuaikan dengan saiz skrin dan jenis peranti yang berbeza. Saya harap artikel ini dapat memberi anda beberapa panduan berguna dan diaplikasikan dalam projek sebenar.

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