So sánh giữa Flexbox, Grid và Bố cục Cột
Bài viết này giải thích sự so sánh giữa Flexbox, Grid và Bố cục Cột.
Bạn sẽ học được sự khác biệt giữa Flexbox, Grid và Bố cục Cột, và khi nào nên sử dụng chúng.
YouTube Video
HTML để Xem trước
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>So sánh giữa Flexbox, Grid và Bố cục Cột
flex, grid và columns trong CSS đều là những kỹ thuật dùng để căn chỉnh và bố trí các phần tử, nhưng mỗi kỹ thuật lại có ưu điểm và trường hợp sử dụng lý tưởng riêng. Dưới đây là giải thích rõ ràng về sự khác biệt của chúng thông qua so sánh.
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}Đặc điểm
- Phù hợp cho bố cục một chiều—hoặc ngang hoặc dọc.
- Cho phép kiểm soát linh hoạt thứ tự và tính linh hoạt của các phần tử.
- Phù hợp nhất cho bố cục quy mô nhỏ như thanh điều hướng và nhóm nút.
Ưu điểm
- Tự động điều chỉnh kích thước các phần tử con.
- Bạn có thể thay đổi thứ tự của các phần tử bằng cách sử dụng các thuộc tính như
flex-direction,flex-wrapvàorder.
Ví dụ về việc thay đổi thứ tự hiển thị
Lấy ví dụ về việc thay đổi thứ tự hiển thị, hãy đặt thuộc tính flex-direction thành column.
1.flex-container {
2 flex-direction: column;
3}Khi đặt flex-direction thành column, các mục sẽ thay đổi từ bố cục ngang sang bố cục dọc. Bố cục thay đổi từ trái qua phải sang từ trên xuống dưới.
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}Đặc điểm
- Lý tưởng cho bố cục hai chiều.
- Cho phép định nghĩa rõ ràng bố cục dựa trên lưới.
- Tuyệt vời cho các thiết kế phức tạp hơn và cấu trúc trang tổng thể.
Ưu điểm
- Hàng và cột có thể được định nghĩa đồng thời.
- Các phần có thể được đặt bằng cách sử dụng các khu vực được đặt tên (
grid-area). - Các phần tử con có thể được đặt tự do trong lưới, cho phép kiểm soát linh hoạt thứ tự.
Ví dụ về việc thay đổi thứ tự hiển thị
Lấy ví dụ về việc thay đổi thứ tự hiển thị, hãy sử dụng thuộc tính grid-template-areas để thiết lập các vị trí hiển thị.
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; }Như bạn có thể thấy, grid không chỉ được sử dụng để thay đổi thứ tự hiển thị mà còn tạo ra các bố cục độc đáo.
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}Đặc điểm
- Bạn có thể dễ dàng tạo các cột kiểu tạp chí.
- Lý tưởng cho nội dung văn bản chảy.
- Tuân theo thứ tự nguồn HTML, làm nó ít phù hợp cho việc kiểm soát thứ tự các phần tử.
Ưu điểm
- Có thể tự động chia đoạn văn bản dài.
- Bạn có thể rất dễ dàng tạo các bố cục kiểu báo.
Bảng So Sánh
| Tính năng / Trường hợp sử dụng | Flexbox | Grid | Cột |
|---|---|---|---|
| Kích thước Bố cục | 1D (ngang hoặc dọc) | 2D (ngang & dọc) | 1D (dọc) |
| Phù hợp nhất cho | Căn chỉnh thành phần | Cấu trúc trang đầy đủ | Văn bản dạng nhiều cột |
| Tính linh hoạt của bố cục | Cao (theo thứ tự & kích thước) | Rất cao (định nghĩa khu vực) | Thấp (chỉ chia tự động) |
| Kiểm soát thành phần con | Linh hoạt | Được xác định rõ ràng | Khó kiểm soát |
| Mục đích Bố cục | Dựa theo nội dung | Dựa theo bố cục | Dựa theo văn bản |
Tóm tắt
- Flexbox lý tưởng khi bạn muốn căn chỉnh các thành phần theo hàng, chẳng hạn như tiêu đề hoặc danh sách thẻ.
- Grid phù hợp khi bạn muốn thiết kế toàn bộ bố cục, chẳng hạn như cấu trúc của một trang web.
- Cột là lựa chọn tốt nhất khi bạn muốn định dạng văn bản thành nhiều cột, chẳng hạn trong các bài viết hoặc blog.
Bạn cũng có thể kết hợp chúng theo nhu cầu. Ví dụ, bạn có thể thiết kế bố cục tổng thể bằng Grid và căn chỉnh các phần tử bên trong bằng Flex.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.