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, danorder.
Contoh perubahan susunan paparan
flex-direction
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.
flex-wrap
Menetapkan nilai wrap-reverse untuk sifat flex-wrap akan membalikkan susunan barisan yang diulang dari arah biasa.
1.flex-container {
2 flex-direction: row;
3 flex-wrap: wrap-reverse;
4}Dengan cara ini, barisan akan dipaparkan bertindan dari bawah ke atas.
1.flex-container {
2 flex-direction: column;
3 flex-wrap: wrap-reverse;
4}Apabila flex-direction ditetapkan kepada column dan flex-wrap ditetapkan kepada wrap-reverse, item akan disusun secara menegak manakala lajur diulang dari kanan ke kiri. Seperti dalam contoh ini, susunan lajur diterbalikkan daripada biasa dari kiri ke kanan, dan item ditambah dari kanan ke kiri.
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; }Dalam contoh ini, sifat grid-template-areas digunakan untuk mentakrifkan tata letak grid secara visual dan memberikan nama kawasan kepada setiap sel. Kemudian, dengan memberikan nama grid-area yang bersesuaian kepada setiap elemen anak, ia akan diletakkan di posisi yang diinginkan. Dengan menggunakan grid dengan cara ini, anda bukan sahaja boleh menukar susunan elemen seperti yang diingini tetapi juga dengan mudah mencipta tata letak yang kompleks dan 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.