Paghahambing ng Flexbox, Grid, at Column Layouts
Ang artikulong ito ay nagpapaliwanag ng paghahambing sa pagitan ng Flexbox, Grid, at Column Layouts.
Matututuhan mo ang mga pagkakaiba sa pagitan ng Flexbox, Grid, at Column Layouts, at kung kailan gamitin ang bawat isa.
YouTube Video
HTML para sa Preview
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>Paghahambing ng Flexbox, Grid, at Column Layouts
Ang CSS flex, grid, at columns ay iba't ibang pamamaraan para sa pag-align at pag-layout ng mga elemento, ngunit bawat isa ay may sariling lakas at mga angkop na gamit. Narito sa ibaba ang malinaw na paliwanag sa kanilang mga pagkakaiba sa pamamagitan ng paghahambing.
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}Mga Tampok
- Angkop para sa isang direksyon na layout—pahalang o patayo.
- Pinapayagan ang flexible na kontrol sa pagkakasunod-sunod at flexibility ng mga elemento.
- Pinakamainam para sa maliliit na layout tulad ng navigation bars at mga grupo ng button.
Mga Bentahe
- Awtomatikong inaayos ang sukat ng mga child element.
- Maaari mong baguhin ang pagkakasunod-sunod ng mga elemento gamit ang mga property tulad ng
flex-direction,flex-wrap, atorder.
Halimbawa ng pagbabago sa pagkakasunod-sunod ng display
Bilang halimbawa ng pagbabago sa pagkakasunod-sunod ng display, itakda natin ang property na flex-direction sa column.
1.flex-container {
2 flex-direction: column;
3}Kapag ang flex-direction ay itinakda sa column, ang mga item ay nagbabago mula sa horizontal na layout patungo sa vertical. Ang layout ay nagbabago mula kaliwa-papuntang-kanan patungo sa itaas-papuntang-ibaba.
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}Mga Tampok
- Perpekto para sa dalawang-dimensyon na layout.
- Pinapayagan ang malinaw na pagdeklara ng mga layout na nakabase sa grid.
- Mahusay para sa mas komplikadong disenyo at pangkalahatang estruktura ng pahina.
Mga Bentahe
- Ang mga hanay at kolum ay maaaring tukuyin nang sabay.
- Ang mga seksiyon ay maaaring ilagay gamit ang mga tinukoy na lugar (
grid-area). - Ang mga child element ay maaaring ilagay ng malaya sa loob ng grid, pinapayagan ang flexible na kontrol sa pagkakasunod-sunod.
Halimbawa ng pagbabago sa pagkakasunod-sunod ng display
Bilang halimbawa ng pagbabago sa pagkakasunod-sunod ng display, gamitin natin ang property na grid-template-areas para itakda ang mga display position.
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; }Gaya ng makikita mo, ang grid ay maaaring gamitin hindi lamang sa pagbabago ng pagkakasunod-sunod ng display kundi pati na rin sa paglikha ng mga natatanging layout.
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}Mga Tampok
- Madali kang makakalikha ng mga column na parang magazine-style.
- Perpekto para sa umaagos na nilalaman ng teksto.
- Sinusunod ang pagkakasunod-sunod sa HTML source, kaya't hindi ito gaanong angkop para sa pagkontrol ng pagkakasunod-sunod ng elemento.
Mga Bentahe
- Maaaring awtomatikong hatiin ang mahabang teksto.
- Napakadali mong makalikha ng mga layout na parang istilong diyaryo.
Tablang Paghahambing
| Tampok / Gamit na Kaso | Flexbox | Grid | Mga Haligi |
|---|---|---|---|
| Sukat ng Layout | 1D (pahalang o patayo) | 2D (pahalang at patayo) | 1D (patayo) |
| Pinakamainam Para sa | Pag-aayos ng mga bahagi | Buong estruktura ng pahina | Tekstong multi-hilera |
| Kakayahang umangkop sa Layout | Mataas (pagkakasunod & sukat) | Napakataas (pagpapakahulugan ng lugar) | Mababa (awtomatikong hati lamang) |
| Pagkontrol sa Mga Elemento | Flexible | Malinaw na nakalahad | Mahirap kontrolin |
| Layunin ng Layout | Naka-base sa nilalaman | Naka-base sa layout | Naka-base sa teksto |
Buod
- Ang Flexbox ay perpekto kapag nais mong ihanay ang mga elemento nang pantay-pantay, gaya ng mga header o listahan ng card.
- Ang Grid ay angkop kapag nais mong idisenyo ang buong layout, gaya ng estruktura ng isang web page.
- Ang Mga Haligi ay pinakamahusay kapag nais mong i-format ang teksto sa maraming hilera, gaya ng sa mga artikulo o blog.
Maaari mo ring pagsamahin ang mga ito kung kinakailangan. Halimbawa, maaari mong idisenyo ang kabuuang layout gamit ang Grid at ihanay ang mga panloob na elemento gamit ang Flex.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.