Reka Letak CSS - Terapung, Kotak Flex dan Grid

Kuliah 5: Reka Letak CSS - Terapung, Kotak Flex dan Grid

Dalam kuliah ini, kita akan menyelami teknik penting untuk mencipta reka letak dalam CSS. Memahami cara menstruktur kandungan anda menggunakan terapung, Flexbox dan Grid akan membolehkan anda membina tapak web yang responsif dan teratur. Menjelang akhir kuliah ini, anda akan dapat membuat reka letak yang disesuaikan dengan saiz skrin dan peranti yang berbeza.

---

Memahami Teknik Reka Letak CSS

CSS menawarkan beberapa teknik susun atur, setiap satu dengan kes penggunaannya sendiri. Kami akan merangkumi tiga kaedah asas: Terapung, Flexbox dan Grid.

1. Terapung

Apungan pada mulanya direka untuk membungkus teks pada imej, tetapi ia telah digunakan secara meluas untuk membuat reka letak. Walaupun kebanyakannya telah digantikan dengan teknik yang lebih baharu, ia masih berguna untuk situasi tertentu.

• Contoh:

  .left {
    float: left;
    width: 50%;
  }

  .right {
    float: right;
    width: 50%;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

• HTML:

  <div class="clearfix">
    <div class="left">Left Content</div>
    <div class="right">Right Content</div>
  </div>

Dalam contoh ini, dua div diapungkan ke kiri dan kanan, mewujudkan reka letak dua lajur.

2. Flexbox

Flexbox ialah teknik susun atur yang lebih moden yang menyediakan keupayaan penjajaran dan pengedaran yang berkuasa. Ia sesuai untuk mencipta reka letak yang fleksibel dan responsif.

• Contoh:

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

  .flex-item {
    flex: 1;
    margin: 10px;
  }

• HTML:

  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </div>

Di sini, bekas .flex menggunakan Flexbox untuk mengagihkan tiga item secara sama rata merentasi bekas, dengan jarak yang sama antara mereka.

3. Grid CSS

Grid ialah sistem reka letak yang paling berkuasa dalam CSS, membolehkan anda membuat reka letak dua dimensi yang kompleks dengan kawalan tepat ke atas baris dan lajur.

• Contoh:

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
  }

  .grid-item {
    padding: 20px;
    background-color: #ccc;
  }

• HTML:

  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

Contoh ini mencipta reka letak grid dengan dua lajur. Lajur pertama mengambil satu pecahan ruang, dan yang kedua mengambil dua pecahan, dengan jurang 10px antara item.

Contoh Praktikal:

Mari buat reka letak halaman web yang ringkas menggunakan Flexbox untuk mengatur pengepala, kandungan utama dan pengaki.

HTML:

<div class="flex-container">
  <header class="flex-item header">Header</header>
  <main class="flex-item main">Main Content</main>
  <footer class="flex-item footer">Footer</footer>
</div>

CSS:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header, .footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

.main {
  flex: 1;
  padding: 20px;
  background-color: #f4f4f4;
}

Dalam contoh ini:

• Pengepala dan pengaki diberi ketinggian tetap dan warna latar belakang, manakala kandungan utama mengembang untuk memenuhi ruang yang tinggal.
• Flexbox digunakan untuk menjajarkan dan mengedarkan kandungan secara menegak.

Amalkan Senaman

1. Buat halaman web ringkas menggunakan terapung untuk mencipta reka letak dua lajur.
2. Gunakan Flexbox untuk mereka bentuk bar navigasi responsif.
3. Percubaan dengan Grid CSS untuk mencipta reka letak berbilang lajur dengan saiz baris dan lajur yang berbeza.

---

Seterusnya: Dalam kuliah seterusnya, kami akan meneroka Reka Bentuk Web Responsif dengan Pertanyaan Media, di mana anda akan belajar cara membuat reka letak anda menyesuaikan diri dengan saiz skrin yang berbeza dan peranti. Nantikan!

---

ikuti saya di Linkedin

Ridoy Hasan

Atas ialah kandungan terperinci Reka Letak CSS - Terapung, Kotak Flex dan Grid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!