-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathFlexbox.htm
More file actions
186 lines (183 loc) · 48.3 KB
/
Flexbox.htm
File metadata and controls
186 lines (183 loc) · 48.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/e503160baa2cd0f0.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-457dc077475af9ee.js"/><script src="/_next/static/chunks/4bd1b696-3cf1b1127452a604.js" async=""></script><script src="/_next/static/chunks/517-6cbbb564b6b7a65d.js" async=""></script><script src="/_next/static/chunks/main-app-8eb68113308ecd14.js" async=""></script><script src="/_next/static/chunks/app/layout-40e71d42d3ccdee8.js" async=""></script><script src="/_next/static/chunks/839-150b5850706a66a5.js" async=""></script><script src="/_next/static/chunks/664-604679c007c3b6d5.js" async=""></script><script src="/_next/static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js" async=""></script><meta name="next-size-adjust"/><title>Tài liệu HTML,CSS,JS - Flexbox</title><meta name="description" content="# Các Thuộc Tính CSS Liên Quan Đến `flex`
Flexbox (Flexible Box Layout) là một mô hình bố cục trong CSS giúp thiết kế các phần tử dễ dàng hơn trong một contain..."/><meta property="og:title" content="Tài liệu HTML,CSS,JS - Flexbox"/><meta property="og:description" content="# Các Thuộc Tính CSS Liên Quan Đến `flex`
Flexbox (Flexible Box Layout) là một mô hình bố cục trong CSS giúp thiết kế các phần tử dễ dàng hơn trong một contain..."/><meta property="og:image" content="https://study.sfit.com.vn/bgclb.jpg"/><meta property="og:image:alt" content="Tài liệu HTML,CSS,JS - Flexbox"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2024-12-10T08:07:13.863Z"/><meta property="article:author" content="zunohoang"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Tài liệu HTML,CSS,JS - Flexbox"/><meta name="twitter:description" content="# Các Thuộc Tính CSS Liên Quan Đến `flex`
Flexbox (Flexible Box Layout) là một mô hình bố cục trong CSS giúp thiết kế các phần tử dễ dàng hơn trong một contain..."/><meta name="twitter:image" content="https://study.sfit.com.vn/bgclb.jpg"/><meta name="twitter:image:alt" content="Tài liệu HTML,CSS,JS - Flexbox"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_1e4310 __variable_c3aa02 antialiased"><main class="container mx-auto px-4 pt-2 py-8"><header class="mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between"><div><h1 class="text-3xl font-bold">Tài liệu HTML,CSS,JS - Flexbox</h1><p class="text-gray-600">Đăng bởi <i>zunohoang</i> vào <time dateTime="2024-12-10T08:07:13.863Z">12/10/2024</time></p></div><p>👁️ <!-- -->22<!-- --> lượt xem</p></header><article><div class="markdown-body bg-white p-6 rounded-lg"><h1 class="text-3xl font-bold mb-4 pb-2 border-b">Các Thuộc Tính CSS Liên Quan Đến <code class="bg-gray-100 rounded px-1 py-0.5">flex</code></h1>
<p class="mb-4">Flexbox (Flexible Box Layout) là một mô hình bố cục trong CSS giúp thiết kế các phần tử dễ dàng hơn trong một container mà không cần phải sử dụng float hoặc positioning. Flexbox cho phép các phần tử con linh hoạt, có thể mở rộng hoặc thu nhỏ tùy vào không gian có sẵn trong container.</p>
<h2 class="text-2xl font-bold mt-6 mb-4">1. <code class="bg-gray-100 rounded px-1 py-0.5">display: flex;</code></h2>
<p class="mb-4">Thuộc tính này được sử dụng để kích hoạt chế độ Flexbox cho phần tử container.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class" style="color:#d7ba7d">.container</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> flex</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Kích hoạt chế độ Flexbox cho phần tử container.</li>
<li class="mb-1">Các phần tử con trong container này sẽ có thể sắp xếp theo chiều ngang hoặc chiều dọc.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">2. <code class="bg-gray-100 rounded px-1 py-0.5">flex-direction</code></h2>
<p class="mb-4">Thuộc tính này xác định hướng của các phần tử con trong container (chiều ngang hoặc chiều dọc).</p>
<h3 class="text-xl font-bold mt-5 mb-3">Các giá trị:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">row</code>: Các phần tử con được sắp xếp theo chiều ngang (mặc định).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">row-reverse</code>: Các phần tử con được sắp xếp theo chiều ngang, nhưng theo thứ tự ngược lại.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">column</code>: Các phần tử con được sắp xếp theo chiều dọc.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">column-reverse</code>: Các phần tử con được sắp xếp theo chiều dọc, nhưng theo thứ tự ngược lại.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class" style="color:#d7ba7d">.container</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> flex</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">flex-direction</span><span class="token" style="color:#d4d4d4">:</span><span> column</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Xác định hướng sắp xếp các phần tử con trong container.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">3. <code class="bg-gray-100 rounded px-1 py-0.5">flex-wrap</code></h2>
<p class="mb-4">Thuộc tính này xác định xem các phần tử con có được phép chuyển sang dòng mới khi không còn đủ không gian trên một dòng hay không.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Các giá trị:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">nowrap</code>: Các phần tử con không bao giờ chuyển sang dòng mới (mặc định).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">wrap</code>: Các phần tử con sẽ chuyển sang dòng mới nếu không đủ không gian.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">wrap-reverse</code>: Các phần tử con sẽ chuyển sang dòng mới, nhưng theo thứ tự ngược lại.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class" style="color:#d7ba7d">.container</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> flex</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">flex-wrap</span><span class="token" style="color:#d4d4d4">:</span><span> wrap</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Cho phép các phần tử con chuyển sang dòng mới khi không đủ không gian.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">4. <code class="bg-gray-100 rounded px-1 py-0.5">justify-content</code></h2>
<p class="mb-4">Thuộc tính này xác định cách các phần tử con được phân bố dọc theo trục chính (the main axis).</p>
<h3 class="text-xl font-bold mt-5 mb-3">Các giá trị:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">flex-start</code>: Các phần tử được căn trái (mặc định).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">flex-end</code>: Các phần tử được căn phải.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">center</code>: Các phần tử được căn giữa.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">space-between</code>: Các phần tử được phân bố đều với khoảng cách bằng nhau giữa các phần tử.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">space-around</code>: Các phần tử được phân bố đều, với khoảng cách bằng nhau giữa các phần tử, bao gồm khoảng cách trước và sau phần tử đầu tiên và cuối cùng.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">space-evenly</code>: Các phần tử được phân bố đều với khoảng cách giữa các phần tử bằng nhau.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class" style="color:#d7ba7d">.container</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> flex</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">justify-content</span><span class="token" style="color:#d4d4d4">:</span><span> space-between</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Xác định cách các phần tử con được phân bố trên trục chính (ngang trong trường hợp <code class="bg-gray-100 rounded px-1 py-0.5">row</code>, dọc trong trường hợp <code class="bg-gray-100 rounded px-1 py-0.5">column</code>).</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">5. <code class="bg-gray-100 rounded px-1 py-0.5">align-items</code></h2>
<p class="mb-4">Thuộc tính này xác định cách các phần tử con được căn chỉnh dọc theo trục phụ (the cross axis).</p>
<h3 class="text-xl font-bold mt-5 mb-3">Các giá trị:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">stretch</code>: Các phần tử con sẽ được kéo dài để lấp đầy không gian dọc theo trục phụ (mặc định).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">flex-start</code>: Các phần tử được căn theo phía đầu của trục phụ.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">flex-end</code>: Các phần tử được căn theo phía cuối của trục phụ.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">center</code>: Các phần tử được căn giữa dọc theo trục phụ.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">baseline</code>: Các phần tử được căn theo đường cơ sở của văn bản.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class" style="color:#d7ba7d">.container</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> flex</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">align-items</span><span class="token" style="color:#d4d4d4">:</span><span> center</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Xác định cách các phần tử con được căn chỉnh dọc theo trục phụ (ngang trong trường hợp <code class="bg-gray-100 rounded px-1 py-0.5">column</code>, dọc trong trường hợp <code class="bg-gray-100 rounded px-1 py-0.5">row</code>).</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">6. <code class="bg-gray-100 rounded px-1 py-0.5">align-self</code></h2>
<p class="mb-4">Thuộc tính này cho phép phần tử con tự điều chỉnh cách căn chỉnh dọc theo trục phụ, khác với giá trị của <code class="bg-gray-100 rounded px-1 py-0.5">align-items</code> trong container.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Các giá trị:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">auto</code>: Dùng giá trị của <code class="bg-gray-100 rounded px-1 py-0.5">align-items</code> trong container.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">flex-start</code>: Căn phần tử con theo phía đầu của trục phụ.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">flex-end</code>: Căn phần tử con theo phía cuối của trục phụ.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">center</code>: Căn phần tử con vào giữa dọc theo trục phụ.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">baseline</code>: Căn phần tử con theo đường cơ sở của văn bản.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">stretch</code>: Kéo dài phần tử con để lấp đầy không gian dọc theo trục phụ.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class" style="color:#d7ba7d">.item</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">align-self</span><span class="token" style="color:#d4d4d4">:</span><span> flex-end</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Cho phép phần tử con căn chỉnh riêng biệt dọc theo trục phụ, không bị ảnh hưởng bởi <code class="bg-gray-100 rounded px-1 py-0.5">align-items</code> của container.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">7. <code class="bg-gray-100 rounded px-1 py-0.5">flex-grow</code></h2>
<p class="mb-4">Thuộc tính này xác định phần tử con sẽ mở rộng bao nhiêu trong container nếu có không gian dư thừa.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Giá trị:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Một giá trị số, thông thường là một giá trị tỷ lệ.</li>
<li class="mb-1">Giá trị mặc định là <code class="bg-gray-100 rounded px-1 py-0.5">0</code>, tức là không phần tử con nào sẽ mở rộng.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class" style="color:#d7ba7d">.item</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">flex-grow</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">1</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Xác định tỷ lệ phần tử con sẽ mở rộng khi có không gian dư thừa trong container.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">8. <code class="bg-gray-100 rounded px-1 py-0.5">flex-shrink</code></h2>
<p class="mb-4">Thuộc tính này xác định phần tử con sẽ thu nhỏ bao nhiêu khi không gian không đủ.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Giá trị:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Một giá trị số, thông thường là một giá trị tỷ lệ.</li>
<li class="mb-1">Giá trị mặc định là <code class="bg-gray-100 rounded px-1 py-0.5">1</code>, tức là phần tử con sẽ thu nhỏ theo tỷ lệ khi không gian không đủ.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class" style="color:#d7ba7d">.item</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">flex-shrink</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">0</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Xác định tỷ lệ phần tử con sẽ thu nhỏ khi không gian trong container bị hạn chế.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">9. <code class="bg-gray-100 rounded px-1 py-0.5">flex-basis</code></h2>
<p class="mb-4">Thuộc tính này xác định kích thước ban đầu của phần tử con trước khi nó được phân phối không gian dư thừa.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Giá trị:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Có thể là một giá trị đo lường (px, %, em, v.v.) hoặc <code class="bg-gray-100 rounded px-1 py-0.5">auto</code>.</li>
<li class="mb-1">Giá trị mặc định là <code class="bg-gray-100 rounded px-1 py-0.5">auto</code>, tức là phần tử con sẽ sử dụng kích thước nội dung của nó.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class" style="color:#d7ba7d">.item</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">flex-basis</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">200</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Xác định kích thước ban đầu của phần tử con trước khi tính toán các giá trị <code class="bg-gray-100 rounded px-1 py-0.5">flex-grow</code> hoặc <code class="bg-gray-100 rounded px-1 py-0.5">flex-shrink</code>.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">10. <code class="bg-gray-100 rounded px-1 py-0.5">flex</code></h2>
<p class="mb-4">Thuộc tính viết tắt của <code class="bg-gray-100 rounded px-1 py-0.5">flex-grow</code>, <code class="bg-gray-100 rounded px-1 py-0.5">flex-shrink</code>, và <code class="bg-gray-100 rounded px-1 py-0.5">flex-basis</code>. Nó có thể được sử dụng để thiết lập tất cả ba giá trị này trong một câu lệnh duy nhất.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class" style="color:#d7ba7d">.item</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">flex</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">1</span><span> </span><span class="token" style="color:#b5cea8">1</span><span> </span><span class="token" style="color:#b5cea8">200</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">flex-grow</code>: 1</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">flex-shrink</code>: 1</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">flex-basis</code>: 200px</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">11. <code class="bg-gray-100 rounded px-1 py-0.5">order</code></h2>
<p class="mb-4">Thuộc tính này xác định thứ tự của phần tử con trong container.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Giá trị:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Một giá trị số, mặc định là <code class="bg-gray-100 rounded px-1 py-0.5">0</code>.</li>
<li class="mb-1">Thứ tự của các phần tử con có thể thay đổi tùy thuộc vào giá trị của <code class="bg-gray-100 rounded px-1 py-0.5">order</code>.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token class" style="color:#d7ba7d">.item</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">order</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">2</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Các đặc điểm:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Xác định thứ tự của phần tử con trong container. Các phần tử với giá trị <code class="bg-gray-100 rounded px-1 py-0.5">order</code> nhỏ hơn sẽ xuất hiện trước.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">Kết Luận</h2>
<p class="mb-4">Các thuộc tính liên quan đến <code class="bg-gray-100 rounded px-1 py-0.5">flex</code> giúp tạo ra các layout linh hoạt và dễ dàng quản lý không gian trên trang web. Flexbox giúp bạn có thể dễ dàng sắp xếp các phần tử con mà không cần phải sử dụng float hoặc các kỹ thuật bố cục phức tạp khác. Khi sử dụng kết hợp các thuộc tính này, bạn có thể kiểm soát mọi yếu tố trong một container với độ chính xác cao.</p></div></article><footer class="mt-8 border-t pt-4"><p class="text-center text-gray-500">© 2024 SFIT | <a target="_blank" rel="noopener noreferrer" href="https://github.com/zunohoang">zunohoang</a>. All rights reserved.</p></footer></main><!--$--><!--/$--><script src="/_next/static/chunks/webpack-457dc077475af9ee.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"4:\"$Sreact.fragment\"\n5:I[15244,[],\"\"]\n6:I[43866,[],\"\"]\n7:I[96641,[\"177\",\"static/chunks/app/layout-40e71d42d3ccdee8.js\"],\"Analytics\"]\n9:I[86213,[],\"OutletBoundary\"]\nb:I[86213,[],\"MetadataBoundary\"]\nd:I[86213,[],\"ViewportBoundary\"]\nf:I[34835,[],\"\"]\n1:HL[\"/_next/static/media/4473ecc91f70f139-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n2:HL[\"/_next/static/media/463dafcda517f24f-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n3:HL[\"/_next/static/css/e503160baa2cd0f0.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"wpuafLjPzZSt3xkV7rnb4\",\"p\":\"\",\"c\":[\"\",\"docs\",\"6757f6b109128816d23cb064\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"id\",\"6757f6b109128816d23cb064\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$4\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e503160baa2cd0f0.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[null,[\"$\",\"body\",null,{\"className\":\"__variable_1e4310 __variable_c3aa02 antialiased\",\"children\":[[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}],[\"$\",\"$L7\",null,{}]]}]]}]]}],{\"children\":[\"docs\",[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[[\"id\",\"6757f6b109128816d23cb064\",\"d\"],[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\",\"$0:f:0:1:2:children:2:children:0\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$4\",\"c\",{\"children\":[\"$L8\",null,[\"$\",\"$L9\",null,{\"children\":\"$La\"}]]}],{},null]},null]},null]},null],[\"$\",\"$4\",\"h\",{\"children\":[null,[\"$\",\"$4\",\"eod4gLV52Gok0XmEiPKUY\",{\"children\":[[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\"}]]}]]}]]],\"m\":\"$undefined\",\"G\":[\"$f\",\"$undefined\"],\"s\":false,\"S\":false}\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"Tài liệu HTML,CSS,JS - Flexbox\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến `flex`\\n\\nFlexbox (Flexible Box Layout) là một mô hình bố cục trong CSS giúp thiết kế các phần tử dễ dàng hơn trong một contain...\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:title\",\"content\":\"Tài liệu HTML,CSS,JS - Flexbox\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến `flex`\\n\\nFlexbox (Flexible Box Layout) là một mô hình bố cục trong CSS giúp thiết kế các phần tử dễ dàng hơn trong một contain...\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - Flexbox\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"8\",{\"property\":\"article:published_time\",\"content\":\"2024-12-10T08:07:13.863Z\"}],[\"$\",\"meta\",\"9\",{\"property\":\"article:author\",\"content\":\"zunohoang\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"Tài liệu HTML,CSS,JS - Flexbox\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến `flex`\\n\\nFlexbox (Flexible Box Layout) là một mô hình bố cục trong CSS giúp thiết kế các phần tử dễ dàng hơn trong một contain...\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - Flexbox\"}]]\na:null\n"])</script><script>self.__next_f.push([1,"10:I[48073,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"default\"]\n12:I[44839,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"\"]\n11:T1f6d,"])</script><script>self.__next_f.push([1,"# Các Thuộc Tính CSS Liên Quan Đến `flex`\n\nFlexbox (Flexible Box Layout) là một mô hình bố cục trong CSS giúp thiết kế các phần tử dễ dàng hơn trong một container mà không cần phải sử dụng float hoặc positioning. Flexbox cho phép các phần tử con linh hoạt, có thể mở rộng hoặc thu nhỏ tùy vào không gian có sẵn trong container.\n\n## 1. `display: flex;`\nThuộc tính này được sử dụng để kích hoạt chế độ Flexbox cho phần tử container.\n\n### Ví dụ:\n```css\n.container {\n display: flex;\n}\n```\n\n### Các đặc điểm:\n- Kích hoạt chế độ Flexbox cho phần tử container.\n- Các phần tử con trong container này sẽ có thể sắp xếp theo chiều ngang hoặc chiều dọc.\n\n## 2. `flex-direction`\nThuộc tính này xác định hướng của các phần tử con trong container (chiều ngang hoặc chiều dọc).\n\n### Các giá trị:\n- `row`: Các phần tử con được sắp xếp theo chiều ngang (mặc định).\n- `row-reverse`: Các phần tử con được sắp xếp theo chiều ngang, nhưng theo thứ tự ngược lại.\n- `column`: Các phần tử con được sắp xếp theo chiều dọc.\n- `column-reverse`: Các phần tử con được sắp xếp theo chiều dọc, nhưng theo thứ tự ngược lại.\n\n### Ví dụ:\n```css\n.container {\n display: flex;\n flex-direction: column;\n}\n```\n\n### Các đặc điểm:\n- Xác định hướng sắp xếp các phần tử con trong container.\n\n## 3. `flex-wrap`\nThuộc tính này xác định xem các phần tử con có được phép chuyển sang dòng mới khi không còn đủ không gian trên một dòng hay không.\n\n### Các giá trị:\n- `nowrap`: Các phần tử con không bao giờ chuyển sang dòng mới (mặc định).\n- `wrap`: Các phần tử con sẽ chuyển sang dòng mới nếu không đủ không gian.\n- `wrap-reverse`: Các phần tử con sẽ chuyển sang dòng mới, nhưng theo thứ tự ngược lại.\n\n### Ví dụ:\n```css\n.container {\n display: flex;\n flex-wrap: wrap;\n}\n```\n\n### Các đặc điểm:\n- Cho phép các phần tử con chuyển sang dòng mới khi không đủ không gian.\n\n## 4. `justify-content`\nThuộc tính này xác định cách các phần tử con được phân bố dọc theo trục chính (the main axis).\n\n### Các giá trị:\n- `flex-start`: Các phần tử được căn trái (mặc định).\n- `flex-end`: Các phần tử được căn phải.\n- `center`: Các phần tử được căn giữa.\n- `space-between`: Các phần tử được phân bố đều với khoảng cách bằng nhau giữa các phần tử.\n- `space-around`: Các phần tử được phân bố đều, với khoảng cách bằng nhau giữa các phần tử, bao gồm khoảng cách trước và sau phần tử đầu tiên và cuối cùng.\n- `space-evenly`: Các phần tử được phân bố đều với khoảng cách giữa các phần tử bằng nhau.\n\n### Ví dụ:\n```css\n.container {\n display: flex;\n justify-content: space-between;\n}\n```\n\n### Các đặc điểm:\n- Xác định cách các phần tử con được phân bố trên trục chính (ngang trong trường hợp `row`, dọc trong trường hợp `column`).\n\n## 5. `align-items`\nThuộc tính này xác định cách các phần tử con được căn chỉnh dọc theo trục phụ (the cross axis).\n\n### Các giá trị:\n- `stretch`: Các phần tử con sẽ được kéo dài để lấp đầy không gian dọc theo trục phụ (mặc định).\n- `flex-start`: Các phần tử được căn theo phía đầu của trục phụ.\n- `flex-end`: Các phần tử được căn theo phía cuối của trục phụ.\n- `center`: Các phần tử được căn giữa dọc theo trục phụ.\n- `baseline`: Các phần tử được căn theo đường cơ sở của văn bản.\n\n### Ví dụ:\n```css\n.container {\n display: flex;\n align-items: center;\n}\n```\n\n### Các đặc điểm:\n- Xác định cách các phần tử con được căn chỉnh dọc theo trục phụ (ngang trong trường hợp `column`, dọc trong trường hợp `row`).\n\n## 6. `align-self`\nThuộc tính này cho phép phần tử con tự điều chỉnh cách căn chỉnh dọc theo trục phụ, khác với giá trị của `align-items` trong container.\n\n### Các giá trị:\n- `auto`: Dùng giá trị của `align-items` trong container.\n- `flex-start`: Căn phần tử con theo phía đầu của trục phụ.\n- `flex-end`: Căn phần tử con theo phía cuối của trục phụ.\n- `center`: Căn phần tử con vào giữa dọc theo trục phụ.\n- `baseline`: Căn phần tử con theo đường cơ sở của văn bản.\n- `stretch`: Kéo dài phần tử con để lấp đầy không gian dọc theo trục phụ.\n\n### Ví dụ:\n```css\n.item {\n align-self: flex-end;\n}\n```\n\n### Các đặc điểm:\n- Cho phép phần tử con căn chỉnh riêng biệt dọc theo trục phụ, không bị ảnh hưởng bởi `align-items` của container.\n\n## 7. `flex-grow`\nThuộc tính này xác định phần tử con sẽ mở rộng bao nhiêu trong container nếu có không gian dư thừa.\n\n### Giá trị:\n- Một giá trị số, thông thường là một giá trị tỷ lệ.\n- Giá trị mặc định là `0`, tức là không phần tử con nào sẽ mở rộng.\n\n### Ví dụ:\n```css\n.item {\n flex-grow: 1;\n}\n```\n\n### Các đặc điểm:\n- Xác định tỷ lệ phần tử con sẽ mở rộng khi có không gian dư thừa trong container.\n\n## 8. `flex-shrink`\nThuộc tính này xác định phần tử con sẽ thu nhỏ bao nhiêu khi không gian không đủ.\n\n### Giá trị:\n- Một giá trị số, thông thường là một giá trị tỷ lệ.\n- Giá trị mặc định là `1`, tức là phần tử con sẽ thu nhỏ theo tỷ lệ khi không gian không đủ.\n\n### Ví dụ:\n```css\n.item {\n flex-shrink: 0;\n}\n```\n\n### Các đặc điểm:\n- Xác định tỷ lệ phần tử con sẽ thu nhỏ khi không gian trong container bị hạn chế.\n\n## 9. `flex-basis`\nThuộc tính này xác định kích thước ban đầu của phần tử con trước khi nó được phân phối không gian dư thừa.\n\n### Giá trị:\n- Có thể là một giá trị đo lường (px, %, em, v.v.) hoặc `auto`.\n- Giá trị mặc định là `auto`, tức là phần tử con sẽ sử dụng kích thước nội dung của nó.\n\n### Ví dụ:\n```css\n.item {\n flex-basis: 200px;\n}\n```\n\n### Các đặc điểm:\n- Xác định kích thước ban đầu của phần tử con trước khi tính toán các giá trị `flex-grow` hoặc `flex-shrink`.\n\n## 10. `flex`\nThuộc tính viết tắt của `flex-grow`, `flex-shrink`, và `flex-basis`. Nó có thể được sử dụng để thiết lập tất cả ba giá trị này trong một câu lệnh duy nhất.\n\n### Ví dụ:\n```css\n.item {\n flex: 1 1 200px;\n}\n```\n\n### Các đặc điểm:\n- `flex-grow`: 1\n- `flex-shrink`: 1\n- `flex-basis`: 200px\n\n## 11. `order`\nThuộc tính này xác định thứ tự của phần tử con trong container.\n\n### Giá trị:\n- Một giá trị số, mặc định là `0`.\n- Thứ tự của các phần tử con có thể thay đổi tùy thuộc vào giá trị của `order`.\n\n### Ví dụ:\n```css\n.item {\n order: 2;\n}\n```\n\n### Các đặc điểm:\n- Xác định thứ tự của phần tử con trong container. Các phần tử với giá trị `order` nhỏ hơn sẽ xuất hiện trước.\n\n## Kết Luận\nCác thuộc tính liên quan đến `flex` giúp tạo ra các layout linh hoạt và dễ dàng quản lý không gian trên trang web. Flexbox giúp bạn có thể dễ dàng sắp xếp các phần tử con mà không cần phải sử dụng float hoặc các kỹ thuật bố cục phức tạp khác. Khi sử dụng kết hợp các thuộc tính này, bạn có thể kiểm soát mọi yếu tố trong một container với độ chính xác cao."])</script><script>self.__next_f.push([1,"8:[\"$\",\"main\",null,{\"className\":\"container mx-auto px-4 pt-2 py-8\",\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-bold\",\"children\":\"Tài liệu HTML,CSS,JS - Flexbox\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-600\",\"children\":[\"Đăng bởi \",[\"$\",\"i\",null,{\"children\":\"zunohoang\"}],\" vào \",[\"$\",\"time\",null,{\"dateTime\":\"2024-12-10T08:07:13.863Z\",\"children\":\"12/10/2024\"}]]}]]}],[\"$\",\"p\",null,{\"children\":[\"👁️ \",22,\" lượt xem\"]}]]}],[\"$\",\"article\",null,{\"children\":[\"$\",\"$L10\",null,{\"content\":\"$11\"}]}],[\"$\",\"footer\",null,{\"className\":\"mt-8 border-t pt-4\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-center text-gray-500\",\"children\":[\"© 2024 SFIT | \",[\"$\",\"$L12\",null,{\"href\":\"https://github.com/zunohoang\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"zunohoang\"}],\". All rights reserved.\"]}]}]]}]\n"])</script></body></html>