CSS Flexbox dan Grid: Seni Membina Reka Letak Responsif

Reka Letak Fleksibel

paparan: flex

Hidupkan mod susun atur Flex. Tetapkan elemen sebagai bekas Flex, dan elemen anak langsungnya akan menjadi item Flex.

.container {
    display: flex;
}

arah lentur

Mentakrifkan arah paksi utama (arah susunan item). Nilai pilihan:

• baris (lalai): mendatar, dari kiri ke kanan.
• baris-terbalik: mendatar, dari kanan ke kiri.
• lajur: menegak, dari atas ke bawah.
• lajur-terbalik: menegak, dari bawah ke atas.

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

Mengawal sama ada hendak membalut apabila tidak cukup ruang dalam satu baris. Nilai pilihan:

• nowrap (lalai): tiada balut, barang mungkin melimpah ke dalam bekas.
• balut: bungkus, item disusun dalam berbilang baris.
• balut-terbalik: balut, baris pertama di bahagian bawah, dan garisan seterusnya disusun ke atas.

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

justify-content

Mentakrifkan penjajaran pada paksi utama. Nilai pilihan:

• flex-start (lalai): item dijajarkan ke titik permulaan.
• flex-end: item dijajarkan ke titik penamat.
• tengah: item dijajarkan di tengah.
• ruang-antara: agihkan sama rata jarak antara item, item pertama dan terakhir masing-masing dilampirkan pada hujung bekas.
• ruang sekeliling: agihkan jarak antara item secara sama rata, jarak pada kedua-dua belah item adalah sama.
• ruang-sama rata: agihkan jarak antara item secara sama rata, jarak antara item dan tepi bekas dan antara item adalah sama.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

align-item

Mentakrifkan penjajaran pada paksi silang. Nilai pilihan:

• regangan (lalai): Item regangan untuk mengisi keseluruhan paksi silang.
• flex-start: Item sejajar dengan permulaan paksi silang.
• hujung lentur: Item dijajarkan ke hujung paksi silang.
• tengah: Item berpusat pada paksi silang.
• garis dasar: Item diselaraskan mengikut garis dasar.

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

align-content

Hanya berfungsi dalam susun atur Flex berbilang baris (flex-wrap: wrap), mentakrifkan penjajaran item berbilang baris pada paksi silang. Nilai pilihan:

• regangan (lalai): Setiap baris terbentang untuk mengisi keseluruhan paksi silang.
• flex-start: Setiap baris dijajarkan dengan permulaan paksi silang.
• hujung lentur: Setiap baris dijajarkan ke hujung paksi silang.
• tengah: Setiap baris dijajarkan ke tengah paksi silang.
• ruang-antara: agihkan sama rata ruang antara setiap baris dan baris pertama dan terakhir masing-masing dilampirkan pada dua hujung bekas.
• ruang sekeliling: agihkan sama rata ruang antara setiap baris dan ruang pada kedua-dua belah baris adalah sama.

.container {
    display: flex;
}

pesanan

Mentakrifkan susunan item. Semakin kecil nilai, semakin tinggi pesanan. Nilai lalai ialah 0.

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-grow

Mentakrifkan nisbah pembesaran item. Nilai lalai ialah 0, yang bermaksud tiada pembesaran. Jika semua item ditetapkan kepada nilai bukan sifar, ruang yang tinggal diagihkan secara berkadar.

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

lentur-mengecut

Mentakrifkan nisbah pengecutan item. Lalai kepada 1, bermakna ia boleh mengecut. Jika semua item ditetapkan kepada nilai bukan sifar, ia mengecut secara berkadar untuk mengelakkan bekas melimpah.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

asas lentur

Mentakrifkan saiz awal item sebelum ruang yang tinggal diedarkan. Menerima nilai panjang, peratusan, auto (lalai) atau kandungan.

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

lentur

Pendek kata untuk flex-grow, flex-shrink, dan flex-base. Lalai kepada 0 1 auto.

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

align-self

Mengatasi sifat item penjajaran bekas untuk menentukan penjajaran satu item pada paksi silang. Nilai pilihan adalah sama seperti item jajar.

.item {
    order: <integer>;
}

Susun Atur Grid

paparan: grid;

Hidupkan mod susun atur Grid. Tetapkan elemen sebagai bekas Grid dan anak langsungnya akan menjadi item Grid (sel).

.item {
    flex-grow: <number>; /* Default is 0 */
}

grid-template-lajur dan grid-template-baris

Tentukan saiz lajur grid dan trek baris. Menerima panjang, peratusan, fr (unit pecahan, mewakili pecahan ruang grid) atau nilai auto. Anda juga boleh menggunakan fungsi repeat() untuk mencipta trek berulang, dan fungsi minmax() untuk menentukan saiz minimum dan maksimum trek.

.item {
    flex-shrink: <number>; /* defaults to 1 */
}

grid-template-kawasan

Tentukan kawasan susun atur grid dengan menamakan item dan menerangkan struktur grid dengan rentetan. Nama item menggunakan . untuk mewakili sel kosong.

.item {
    flex-basis: <length> | <percentage> | auto | content;
}

grid-jurang atau grid-lajur-jurang dan grid-baris-jurang

Tetapkan jurang antara item dalam grid. Menerima nilai panjang atau peratusan.

.container {
    display: flex;
}

grid-auto-lajur dan grid-auto-baris

Tentukan saiz trek bagi baris atau lajur yang baru ditambah apabila mengisi grid secara automatik. Berkuat kuasa apabila item melebihi julat grid yang ditetapkan.

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

grid-auto-aliran

Mengawal cara item grid diisi dan disusun secara automatik. Nilai pilihan:

• baris (lalai): isikan mengikut baris.
• lajur: isi mengikut lajur.
• padat: Apabila baris atau lajur digunakan dengan padat, jika terdapat jurang dalam grid, item baharu akan cuba mengisi jurang ini dan bukannya menambahnya pada penghujung grid.

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

grid-column-start, grid-column-end, grid-row-start dan grid-row-end

Tentukan kedudukan mula dan akhir item dalam grid secara manual.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

kawasan grid

Sifat ringkas untuk menetapkan grid-row-start, grid-column-start, grid-row-end dan grid-column-end pada masa yang sama atau merujuk nama kawasan yang ditakrifkan dalam grid-template-areas.

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

Grid CSS digabungkan dengan Flexbox

Dalam sesetengah kes, kami boleh menggabungkan kelebihan CSS Grid dan Flexbox untuk mencipta reka letak responsif yang lebih kompleks.

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

Pertama, Grid CSS digunakan untuk mencipta reka letak grid dengan lebar lajur penyesuaian. Setiap item grid (elemen kanak-kanak) menggunakan Flexbox di dalam untuk memusatkan kandungan secara menegak. Apabila lebar skrin kurang daripada 768px, pertanyaan media bertukar kepada susun atur lajur tunggal untuk menyesuaikan diri dengan peranti mudah alih.

Pemilihan Flexbox lwn. Grid

Pilihan menggunakan Flexbox atau Grid biasanya bergantung pada keperluan tertentu:

• Flexbox sesuai untuk mengendalikan reka letak satu dimensi, seperti susunan elemen dalam baris atau lajur, serta penjajaran elemen dan pelapik.
• Grid CSS lebih sesuai untuk mengendalikan reka letak dua dimensi, seperti jadual atau reka letak grid kompleks dan kawalan sel yang tepat.

Atas ialah kandungan terperinci CSS Flexbox dan Grid: Seni Membina Reka Letak Responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!