การเปรียบเทียบ Flexbox, Grid และ Column Layouts
บทความนี้อธิบายการเปรียบเทียบระหว่าง Flexbox, Grid และ Column Layouts
คุณจะได้เรียนรู้ความแตกต่างระหว่าง Flexbox, Grid และ Column Layouts และเมื่อใดควรใช้แต่ละแบบ
YouTube Video
HTML สำหรับการแสดงตัวอย่าง
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>การเปรียบเทียบ Flexbox, Grid และ Column Layouts
CSS flex, grid และ columns เป็นเทคนิคสำหรับ จัดแนวและวางองค์ประกอบ แต่ละอย่างมีจุดเด่นและกรณีการใช้งานที่เหมาะสมของตัวเอง ตัวอย่างด้านล่างนี้อธิบายความแตกต่างของพวกเขาอย่างชัดเจนผ่านการเปรียบเทียบ
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}คุณสมบัติ
- เหมาะสำหรับ เลย์เอาต์แบบทิศทางเดียว ไม่ว่าจะเป็นแนวนอนหรือแนวตั้ง
- สามารถควบคุม ลำดับและความยืดหยุ่น ขององค์ประกอบได้อย่างยืดหยุ่น
- เหมาะสำหรับ เลย์เอาต์ขนาดเล็ก เช่น แถบการนำทางและกลุ่มปุ่ม
ข้อดี
- ปรับขนาดขององค์ประกอบลูกโดยอัตโนมัติ
- คุณสามารถเปลี่ยนลำดับขององค์ประกอบได้ด้วยการใช้คุณสมบัติ เช่น
flex-direction,flex-wrapและorder
ตัวอย่างการเปลี่ยนลำดับการแสดงผล
ตัวอย่างของการเปลี่ยนลำดับการแสดงผล ลองตั้งค่าคุณสมบัติ flex-direction ให้เป็น column กัน
1.flex-container {
2 flex-direction: column;
3}เมื่อ flex-direction ถูกตั้งให้เป็น column องค์ประกอบจะเปลี่ยนจากรูปแบบแนวนอนเป็นแนวตั้ง การจัดเรียงจะเปลี่ยนจากซ้ายไปขวาเป็นบนลงล่าง
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}คุณสมบัติ
- เหมาะสำหรับ เลย์เอาต์แบบสองมิติ
- ช่วยให้สามารถกำหนดเลย์เอาต์แบบกริดได้อย่างชัดเจน
- ยอดเยี่ยมสำหรับการออกแบบที่ซับซ้อนและโครงสร้างหน้าทั้งหมด
ข้อดี
- สามารถกำหนดแถวและคอลัมน์ได้พร้อมกัน
- สามารถวางส่วนต่าง ๆ โดยใช้พื้นที่ที่กำหนดชื่อ (
grid-area) - องค์ประกอบลูกสามารถจัดวางในกริดได้อย่างอิสระ ช่วยให้ควบคุมลำดับได้อย่างยืดหยุ่น
ตัวอย่างการเปลี่ยนลำดับการแสดงผล
ตัวอย่างของการเปลี่ยนลำดับการแสดงผล ลองใช้คุณสมบัติ grid-template-areas เพื่อกำหนดตำแหน่งการแสดงผล
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; }อย่างที่คุณเห็น grid สามารถใช้เปลี่ยนลำดับการแสดงผลและสร้างรูปแบบการจัดวางที่ไม่ซ้ำใครได้ด้วย
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}คุณสมบัติ
- คุณสามารถสร้างคอลัมน์ สไตล์นิตยสาร ได้อย่างง่ายดาย
- เหมาะสำหรับ เนื้อหาที่เป็นข้อความไหล
- ปฏิบัติตามลำดับแหล่ง HTML ทำให้ไม่เหมาะสมในการควบคุมลำดับขององค์ประกอบ
ข้อดี
- สามารถแบ่งข้อความยาวได้โดยอัตโนมัติ
- คุณสามารถสร้างรูปแบบการจัดวาง สไตล์หนังสือพิมพ์ ได้อย่างง่ายดายมาก
ตารางเปรียบเทียบ
| คุณสมบัติ / กรณีการใช้งาน | Flexbox | Grid | คอลัมน์ |
|---|---|---|---|
| มิติของการจัดวาง | 1D (แนวนอนหรือแนวตั้ง) | 2D (แนวนอนและแนวตั้ง) | 1D (แนวตั้ง) |
| เหมาะสำหรับ | การจัดองค์ประกอบ | โครงสร้างหน้าเว็บทั้งหมด | ข้อความหลายคอลัมน์ |
| ความยืดหยุ่นของการจัดวาง | สูง (การเรียงลำดับ & ขนาด) | สูงมาก (กำหนดพื้นที่ได้) | ต่ำ (แบ่งอัตโนมัติเท่านั้น) |
| การควบคุมองค์ประกอบลูก | ยืดหยุ่น | กำหนดชัดเจน | ควบคุมยาก |
| เจตนาของการจัดวาง | ขับเคลื่อนด้วยเนื้อหา | ขับเคลื่อนด้วยการจัดวาง | ขับเคลื่อนด้วยข้อความ |
สรุป
- Flexbox เหมาะสมอย่างยิ่งเมื่อคุณต้องการ จัดเรียงองค์ประกอบในแนวแถว เช่น ส่วนหัวหรือรายการบัตร
- Grid เหมาะสมเมื่อคุณต้องการ ออกแบบการจัดวางทั้งหมด เช่น โครงสร้างของหน้าเว็บ
- คอลัมน์ เหมาะสมที่สุดเมื่อคุณต้องการ จัดรูปแบบข้อความให้เป็นหลายคอลัมน์ เช่น ในบทความหรือนิยายบล็อก
คุณสามารถ ผสมผสานพวกมันได้ตามความต้องการ ตัวอย่างเช่น คุณสามารถออกแบบรูปแบบโดยรวมด้วย Grid และจัดแนวองค์ประกอบภายในด้วย Flex
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย