Susun Atur Grid dan Flex dalam CSS

pengenalan

• FlexBox dan susun atur grid ialah reka letak yang berkuasa.

Flexbox:

• Flexbox ialah model susun atur satu dimensi dan paling sesuai untuk menyusun elemen dalam satu baris atau satu lajur.
• Flexbox amat berguna apabila saiz elemen atau saiz bekas tidak diketahui.
• Ia bagus untuk menjajarkan item secara mendatar dan menegak, dan ia sangat berguna untuk mencipta bar navigasi, bar sisi atau bar alat.

Grid CSS:

• Grid ialah model reka letak dua dimensi dan paling sesuai untuk menyusun elemen ke dalam baris dan lajur pada masa yang sama.
• Ia bagus untuk mencipta reka letak yang kompleks dan boleh mengendalikan kedua-dua lajur dan baris secara serentak, yang menjadikannya pilihan yang baik untuk membina reka letak halaman yang kompleks.

Susun atur grid Secara terperinci

grid-template-columns: repeat(3, 1fr);
grid-template-row: repeat(3, auto);
grid-column: 1/3
grid-row: 1/4

Pengganti Baris

• Pernyataan ulangan(3, minmax(200px, 1fr)) mencipta tiga baris (atau lajur, bergantung pada tempat ia digunakan), setiap satu dengan saiz minimum 200px dan saiz maksimum 1fr.
• Unit 1fr mewakili sebahagian kecil daripada ruang yang tersedia dalam bekas grid. Jadi, jika saiz bekas melebihi jumlah saiz minimum semua baris (600px dalam kes ini), ruang yang tinggal akan diagihkan sama rata antara baris.

repeat(3, minmax(200px 1fr))

automuat & autoisi

Kata kunci isian automatik dan auto muat dalam Grid CSS mengawal cara grid berkelakuan apabila item grid tidak menggunakan ruang tambahan dalam bekas grid.

autoisi

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

Dalam contoh ini, grid akan mencipta sebanyak 100px lajur yang boleh dimuatkan dalam bekas. Jika ada ruang yang tertinggal, ia akan diagihkan sama rata antara lajur.

automuat:

• Kata kunci ini juga memberitahu grid untuk mencipta sebanyak mungkin trek, tetapi ia meruntuhkan trek kosong, jadi tiada trek kosong di hujung grid.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

Dalam contoh ini, grid akan mencipta sebanyak 100px lajur yang boleh dimuatkan dalam bekas. Jika terdapat ruang yang tertinggal, ia akan diedarkan sama rata antara lajur dan mana-mana lajur kosong akan diruntuhkan.

subgrid

• Nilai subgrid dalam CSS Grid Layout digunakan apabila anda mahu item grid menjadi bekas grid dan sejajar dengan grid induknya.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  display: grid;
  grid-template-columns: subgrid;
}

NOTA:-

• Ini boleh berguna apabila anda mahu grid bersarang dijajarkan dengan grid induk.
• Walau bagaimanapun, subgrid tidak disokong secara meluas dalam semua penyemak imbas.

Pertanyaan Bekas

1. Pertanyaan Saiz Bekas

• Pertanyaan Media Lebar mempertimbangkan lebar port pandang tetapi pertanyaan saiz kontena mempertimbangkan lebar kontena Kontena ialah elemen yang sedang ditanya.

Peraturan:-

• Peraturan yang berkuat kuasa hanya keturunan kontena bukan bekas itu sendiri

• pertanyaan saiz bekas ialah tambahan kepada reka bentuk responsif bukan pengganti pertanyaan media.
  

<article class="card">
    <h2 id="That-s-No-Moon-It-s-a-Space-Station">That's No Moon. It's a Space Station.</h2>
    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
  </article>

<!-- we can't query cards in container query so only work with descendants-->
<!-- Workaround solution would be check below-->
<div class="card">
<article>
    <h2 id="That-s-No-Moon-It-s-a-Space-Station">That's No Moon. It's a Space Station.</h2>
    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
  </article>
</div>

.card {
  container-name: card;
  container-type: inline-size;
}

@container card (min-width: 200px) {
  article {
    background-color: red;
  }
}

@container card (min-width: 250px) {
  article {
    ...
  }
}

Atas ialah kandungan terperinci Susun Atur Grid dan Flex dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!