Articles
Pengenalan kepada CSS
Perbandingan antara Flexbox, Grid, dan Susunan Kolum

Perbandingan antara Flexbox, Grid, dan Susunan Kolum

Artikel ini menerangkan perbandingan antara Flexbox, Grid, dan Susunan Kolum.

Anda akan mempelajari perbezaan antara Flexbox, Grid, dan Susunan Kolum, serta bila untuk menggunakannya.

YouTube Video

HTML untuk Pratonton

css-layout-comparision.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  <title>CSS Properties Example</title>
 7  <link rel="stylesheet" href="css-base.css">
 8  <link rel="stylesheet" href="css-layout-comparision.css">
 9</head>
10<body>
11  <!-- Header -->
12  <header>
13      <h1>CSS Properties For Layout</h1>
14  </header>
15  <!-- Main content -->
16  <main>
17    <header>
18        <h2>Layout Comparision</h2>
19    </header>
20    <article>
21      <h3>flex</h3>
22      <section>
23        <section class="sample-view">
24          <div class="flex-container">
25            <div class="flex-item">Item 1</div>
26            <div class="flex-item">Item 2</div>
27            <div class="flex-item">Item 3</div>
28            <div class="flex-item">Item 4</div>
29            <div class="flex-item">Item 5</div>
30            <div class="flex-item">Item 6</div>
31            <div class="flex-item">Item 7</div>
32            <div class="flex-item">Item 8</div>
33            <div class="flex-item">Item 9</div>
34          </div>
35        </section>
36      </section>
37    </article>
38    <article>
39      <h3>grid</h3>
40      <section>
41        <section class="sample-view">
42          <div class="grid-box">
43            <div class="grid-item item1">Item 1</div>
44            <div class="grid-item item2">Item 2</div>
45            <div class="grid-item item3">Item 3</div>
46            <div class="grid-item item4">Item 4</div>
47            <div class="grid-item item5">Item 5</div>
48            <div class="grid-item item6">Item 6</div>
49            <div class="grid-item item7">Item 7</div>
50            <div class="grid-item item8">Item 8</div>
51            <div class="grid-item item9">Item 9</div>
52          </div>
53        </section>
54      </section>
55    </article>
56    <article>
57      <h3>column</h3>
58      <section>
59        <section class="sample-view">
60          <section class="columns-container">
61            <p class="columns-item">Item 1</p>
62            <p class="columns-item">Item 2</p>
63            <p class="columns-item">Item 3</p>
64            <p class="columns-item">Item 4</p>
65            <p class="columns-item">Item 5</p>
66            <p class="columns-item">Item 6</p>
67            <p class="columns-item">Item 7</p>
68            <p class="columns-item">Item 8</p>
69            <p class="columns-item">Item 9</p>
70          </section>
71        </section>
72      </section>
73    </article>
74  </main>
75</body>
76</html>

Perbandingan antara Flexbox, Grid, dan Susunan Kolum

CSS flex, grid, dan columns adalah teknik untuk menyelaraskan dan menyusun elemen, tetapi setiap satu mempunyai kelebihan dan kesesuaian kegunaan masing-masing. Berikut adalah penjelasan jelas mengenai perbezaannya melalui perbandingan.

Flexbox（display: flex） 

 1.flex-container {
 2    display: flex;
 3    justify-content: space-between;
 4    align-items: center;
 5    flex-wrap: wrap;
 6    background-color: lightblue;
 7    height: 200px;
 8}
 9
10.flex-item {
11    background-color: lightskyblue;
12    padding: 10px;
13    margin: 5px;
14    width: 70px;
15    height: auto;
16}

Ciri-ciri

  • Sesuai untuk susunan satu arah—sama ada mendatar atau menegak.
  • Membolehkan kawalan fleksibel ke atas susunan dan kelenturan elemen.
  • Paling sesuai untuk susunan skala kecil seperti bar navigasi dan kumpulan butang.

Kelebihan

  • Secara automatik menyesuaikan saiz elemen anak.
  • Anda boleh mengubah susunan elemen menggunakan sifat seperti flex-direction, flex-wrap, dan order.

Contoh perubahan susunan paparan

Sebagai contoh perubahan susunan paparan, mari tetapkan sifat flex-direction kepada column.

1.flex-container {
2    flex-direction: column;
3}

Apabila flex-direction ditetapkan kepada column, item berubah daripada susun atur mendatar ke menegak. Susun atur berubah dari kiri-ke-kanan kepada atas-ke-bawah.

Grid（display: grid） 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 100px 100px;
 4    grid-template-rows: 50px 50px 50px;
 5    gap: 20px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16}

Ciri-ciri

  • Sesuai untuk susunan dua dimensi.
  • Membolehkan definisi jelas untuk susunan berasaskan grid.
  • Sangat sesuai untuk reka bentuk lebih kompleks dan struktur keseluruhan halaman.

Kelebihan

  • Baris dan kolum boleh ditakrifkan secara serentak.
  • Bahagian boleh ditempatkan menggunakan kawasan bernama (grid-area).
  • Elemen anak boleh ditempatkan secara bebas dalam grid, membolehkan kawalan susunan yang fleksibel.

Contoh perubahan susunan paparan

Sebagai contoh perubahan susunan paparan, mari gunakan sifat grid-template-areas untuk menetapkan kedudukan paparan.

 1.grid-box {
 2    grid-template-areas:
 3        "item1 item4 item5"
 4        "item2 item6 item7"
 5        "item3 item8 item9";
 6}
 7
 8.item1 { grid-area: item1; }
 9.item2 { grid-area: item2; }
10.item3 { grid-area: item3; }
11.item4 { grid-area: item4; }
12.item5 { grid-area: item5; }
13.item6 { grid-area: item6; }
14.item7 { grid-area: item7; }
15.item8 { grid-area: item8; }
16.item9 { grid-area: item9; }

Seperti yang anda lihat, grid boleh digunakan bukan sahaja untuk mengubah susunan paparan tetapi juga untuk mencipta susun atur yang unik.

Columns（column-count, column-width） 

 1.columns-container {
 2    background-color: lightblue;
 3    columns: 100px 3;
 4    column-gap: 20px;
 5    column-rule: 2px solid #333;
 6    padding: 10px;
 7}
 8
 9.columns-item {
10    background-color: lightskyblue;
11    text-align: center;
12    margin: 20px auto;
13    color: white;
14    display: flex;
15    align-items: center;
16    justify-content: center;
17    font-size: 1.2rem;
18    border: 1px solid #ccc;
19    height: 50px;
20}

Ciri-ciri

  • Anda boleh dengan mudah mencipta kolum gaya majalah.
  • Sesuai untuk kandungan teks yang mengalir.
  • Mengikuti susunan sumber HTML, menjadikannya kurang sesuai untuk kawalan susunan elemen.

Kelebihan

  • Boleh secara automatik membahagikan teks panjang.
  • Anda boleh dengan sangat mudah mencipta susun atur gaya akhbar.

Jadual Perbandingan

Ciri / Kes Penggunaan Flexbox Grid Kolum
Dimensi Susun Atur 1D (mendatar atau menegak) 2D (mendatar & menegak) 1D (menegak)
Terbaik Untuk Penjajaran komponen Struktur halaman penuh Teks berbilang kolum
Keluwesan Susun Atur Tinggi (susunan & saiz) Sangat Tinggi (definisi kawasan) Rendah (pembahagian automatik sahaja)
Kawalan Elemen Anak Fleksibel Jelas ditentukan Sukar dikawal
Niat Susun Atur Dipacu oleh kandungan Dipacu oleh susun atur Dipacu oleh teks

Ringkasan

  • Flexbox adalah ideal apabila anda ingin menjajarkan elemen dalam satu baris, seperti tajuk atau senarai kad.
  • Grid sesuai apabila anda ingin mereka keseluruhan susun atur, seperti struktur halaman web.
  • Kolum adalah terbaik apabila anda ingin memformat teks ke dalam pelbagai kolum, seperti dalam artikel atau blog.

Anda juga boleh menggabungkannya mengikut keperluan. Sebagai contoh, anda boleh mereka susun atur keseluruhan dengan Grid dan menyelaraskan elemen dalaman dengan Flex.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Sifat-Sifat CSS Yang Berkaitan Dengan Rekaan Lajur