Articles
Giới thiệu về CSS
Các thuộc tính CSS liên quan đến Flexbox

Các thuộc tính CSS liên quan đến Flexbox

Bài viết này giải thích các thuộc tính CSS liên quan đến flexbox.

Bạn có thể học cách sử dụng flexbox và inline-flexbox.

YouTube Video

HTML để Xem trước

css-flex.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-flex.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>flex</h3>
 23            <section>
 24            <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.flex-container {
 27    display: flex;
 28    justify-content: space-between;
 29    align-items: center;
 30    background-color: lightblue;
 31    height: 100px;
 32}
 33
 34.flex-item {
 35    background-color: lightskyblue;
 36    padding: 10px;
 37    margin: 5px;
 38    width: 70px;
 39    height: auto;
 40}
 41</pre>
 42            <header><h4>HTML</h4></header>
 43<pre>
 44&lt;div class="flex-container"&gt;
 45    &lt;div class="flex-item"&gt;1&lt;/div&gt;
 46    &lt;div class="flex-item"&gt;2&lt;/div&gt;
 47    &lt;div class="flex-item"&gt;3&lt;/div&gt;
 48&lt;/div&gt;
 49</pre>
 50            <header><h4>HTML+CSS</h4></header>
 51            <section class="sample-view">
 52                <div class="flex-container">
 53                    <div class="flex-item">Item 1</div>
 54                    <div class="flex-item">Item 2</div>
 55                    <div class="flex-item">Item 3</div>
 56                </div>
 57            </section>
 58          </section>
 59        </article>
 60        <article>
 61          <h3>flex-direction</h3>
 62          <section>
 63            <header><h4>flex-direction: row</h4></header>
 64            <section class="sample-view">
 65                <div class="flex-container" style="flex-direction: row;">
 66                    <div class="flex-item">Item 1</div>
 67                    <div class="flex-item">Item 2</div>
 68                    <div class="flex-item">Item 3</div>
 69                </div>
 70            </section>
 71            <header><h4>flex-direction: row-reverse</h4></header>
 72            <section class="sample-view">
 73                <div class="flex-container" style="flex-direction: row-reverse;">
 74                    <div class="flex-item">Item 1</div>
 75                    <div class="flex-item">Item 2</div>
 76                    <div class="flex-item">Item 3</div>
 77                </div>
 78            </section>
 79            <header><h4>flex-direction: column</h4></header>
 80            <section class="sample-view">
 81                <div class="flex-container" style="flex-direction: column; height: 200px;">
 82                    <div class="flex-item">Item 1</div>
 83                    <div class="flex-item">Item 2</div>
 84                    <div class="flex-item">Item 3</div>
 85                </div>
 86            </section>
 87            <header><h4>flex-direction: column-reverse</h4></header>
 88            <section class="sample-view">
 89                <div class="flex-container" style="flex-direction: column-reverse; height: 200px;">
 90                    <div class="flex-item">Item 1</div>
 91                    <div class="flex-item">Item 2</div>
 92                    <div class="flex-item">Item 3</div>
 93                </div>
 94            </section>
 95          </section>
 96        </article>
 97        <article>
 98          <h3>justify-content</h3>
 99          <section>
100            <header><h4>justify-content: flex-start</h4></header>
101            <section class="sample-view">
102                <div class="flex-container" style="justify-content: flex-start;">
103                    <div class="flex-item">Item 1</div>
104                    <div class="flex-item">Item 2</div>
105                    <div class="flex-item">Item 3</div>
106                </div>
107            </section>
108            <header><h4>justify-content: flex-end</h4></header>
109            <section class="sample-view">
110                <div class="flex-container" style="justify-content: flex-end;">
111                    <div class="flex-item">Item 1</div>
112                    <div class="flex-item">Item 2</div>
113                    <div class="flex-item">Item 3</div>
114                </div>
115            </section>
116            <header><h4>justify-content: center</h4></header>
117            <section class="sample-view">
118                <div class="flex-container" style="justify-content: center;">
119                    <div class="flex-item">Item 1</div>
120                    <div class="flex-item">Item 2</div>
121                    <div class="flex-item">Item 3</div>
122                </div>
123            </section>
124            <header><h4>justify-content: space-between</h4></header>
125            <section class="sample-view">
126                <div class="flex-container" style="justify-content: space-between;">
127                    <div class="flex-item">Item 1</div>
128                    <div class="flex-item">Item 2</div>
129                    <div class="flex-item">Item 3</div>
130                </div>
131            </section>
132            <header><h4>justify-content: space-around</h4></header>
133            <section class="sample-view">
134                <div class="flex-container" style="justify-content: space-around;">
135                    <div class="flex-item">Item 1</div>
136                    <div class="flex-item">Item 2</div>
137                    <div class="flex-item">Item 3</div>
138                </div>
139            </section>
140          </section>
141        </article>
142        <article>
143          <h3>align-items</h3>
144          <section>
145            <header><h4>align-items: flex-start</h4></header>
146            <section class="sample-view">
147                <div class="flex-container" style="align-items: flex-start; height: 150px;">
148                    <div class="flex-item">Item 1</div>
149                    <div class="flex-item">Item 2</div>
150                    <div class="flex-item">Item 3</div>
151                </div>
152            </section>
153            <header><h4>align-items: center</h4></header>
154            <section class="sample-view">
155                <div class="flex-container" style="align-items: center; height: 150px;">
156                    <div class="flex-item">Item 1</div>
157                    <div class="flex-item">Item 2</div>
158                    <div class="flex-item">Item 3</div>
159                </div>
160            </section>
161            <header><h4>align-items: flex-end</h4></header>
162            <section class="sample-view">
163                <div class="flex-container" style="align-items: flex-end; height: 150px;">
164                    <div class="flex-item">Item 1</div>
165                    <div class="flex-item">Item 2</div>
166                    <div class="flex-item">Item 3</div>
167                </div>
168            </section>
169            <header><h4>align-items: stretch</h4></header>
170            <section class="sample-view">
171                <div class="flex-container" style="align-items: stretch; height: 150px;">
172                    <div class="flex-item">Item 1</div>
173                    <div class="flex-item">Item 2</div>
174                    <div class="flex-item">Item 3</div>
175                </div>
176            </section>
177            <header><h4>align-items: baseline</h4></header>
178            <section class="sample-view">
179                <div class="flex-container" style="align-items: baseline; height: 150px;">
180                    <div class="flex-item">Item 1</div>
181                    <div class="flex-item">Item 2</div>
182                    <div class="flex-item">Item 3</div>
183                </div>
184            </section>
185          </section>
186        </article>
187        <article>
188          <h3>flex-wrap</h3>
189          <section>
190            <header><h4>flex-wrap: nowrap</h4></header>
191            <section class="sample-view">
192                <div class="flex-container" style="flex-wrap: nowrap;">
193                    <div class="flex-item">Item 1</div>
194                    <div class="flex-item">Item 2</div>
195                    <div class="flex-item">Item 3</div>
196                    <div class="flex-item">Item 4</div>
197                    <div class="flex-item">Item 5</div>
198                    <div class="flex-item">Item 6</div>
199                    <div class="flex-item">Item 7</div>
200                    <div class="flex-item">Item 8</div>
201                    <div class="flex-item">Item 9</div>
202                </div>
203            </section>
204            <header><h4>flex-direction: wrap</h4></header>
205            <section class="sample-view">
206                <div class="flex-container" style="flex-wrap: wrap; height: 300px;">
207                    <div class="flex-item">Item 1</div>
208                    <div class="flex-item">Item 2</div>
209                    <div class="flex-item">Item 3</div>
210                    <div class="flex-item">Item 4</div>
211                    <div class="flex-item">Item 5</div>
212                    <div class="flex-item">Item 6</div>
213                    <div class="flex-item">Item 7</div>
214                    <div class="flex-item">Item 8</div>
215                    <div class="flex-item">Item 9</div>
216                </div>
217            </section>
218            <header><h4>flex-direction: wrap-reverse</h4></header>
219            <section class="sample-view">
220                <div class="flex-container" style="flex-wrap: wrap-reverse; height: 300px;">
221                    <div class="flex-item">Item 1</div>
222                    <div class="flex-item">Item 2</div>
223                    <div class="flex-item">Item 3</div>
224                    <div class="flex-item">Item 4</div>
225                    <div class="flex-item">Item 5</div>
226                    <div class="flex-item">Item 6</div>
227                    <div class="flex-item">Item 7</div>
228                    <div class="flex-item">Item 8</div>
229                    <div class="flex-item">Item 9</div>
230                </div>
231            </section>
232          </section>
233        </article>
234        <article>
235          <h3>flex-grow</h3>
236          <section>
237            <header><h4>CSS</h4></header>
238<pre class="sample">
239.item1 {
240  flex-grow: 1;
241}
242
243.item2 {
244  flex-grow: 2;
245}
246
247.item3 {
248  flex-grow: 0;
249}</pre>
250            <header><h4>HTML+CSS</h4></header>
251            <section class="sample-view">
252                <div class="flex-container">
253                    <div class="flex-item" style="flex-grow: 1;">Item 1</div>
254                    <div class="flex-item" style="flex-grow: 2;">Item 2</div>
255                    <div class="flex-item" style="flex-grow: 0;">Item 3</div>
256                </div>
257            </section>
258          </section>
259        </article>
260        <article>
261          <h3>flex-shrink</h3>
262          <section>
263            <header><h4>CSS</h4></header>
264<pre class="sample">
265.item1 {
266  flex-shrink: 0;
267}
268.item2 {
269  flex-shrink: 1;
270}
271.item3 {
272  flex-shrink: 1;
273}</pre>
274            <header><h4>HTML+CSS</h4></header>
275            <section class="sample-view">
276                <div class="flex-container" style="width: 200px;">
277                    <div class="flex-item" style="flex-shrink: 0;">Item 1</div>
278                    <div class="flex-item" style="flex-shrink: 1;">Item 2</div>
279                    <div class="flex-item" style="flex-shrink: 1;">Item 3</div>
280                </div>
281            </section>
282          </section>
283        </article>
284        <article>
285          <h3>flex-basis</h3>
286          <section>
287            <header><h4>CSS</h4></header>
288<pre class="sample">
289.item1 {
290  flex-basis: 100px;
291}
292.item2 {
293  flex-basis: 200px;
294}
295.item3 {
296  flex-basis: 25%;
297}</pre>
298            <header><h4>HTML+CSS</h4></header>
299            <section class="sample-view">
300                <div class="flex-container">
301                    <div class="flex-item" style="flex-basis: 100px;">Item 1</div>
302                    <div class="flex-item" style="flex-basis: 200px;">Item 2</div>
303                    <div class="flex-item" style="flex-basis: 25%;">Item 3</div>
304                </div>
305            </section>
306          </section>
307        </article>
308        <article>
309          <h3>align-self</h3>
310          <section>
311            <header><h4>CSS</h4></header>
312<pre class="sample">
313.item1 {
314  align-self: flex-start;
315}
316.item2 {
317  align-self: center;
318}
319.item3 {
320  align-self: flex-end;
321}</pre>
322            <header><h4>HTML+CSS</h4></header>
323            <section class="sample-view">
324                <div class="flex-container" style="height: 150px;">
325                    <div class="flex-item" style="align-self: flex-start;">Item 1</div>
326                    <div class="flex-item" style="align-self: center;">Item 2</div>
327                    <div class="flex-item" style="align-self: flex-end;">Item 3</div>
328                </div>
329            </section>
330          </section>
331        </article>
332        <article>
333          <h3>order</h3>
334          <section>
335            <header><h4>CSS</h4></header>
336<pre class="sample">
337.item1 {
338  order: 3;
339}
340
341.item2 {
342  order: 1;
343}
344
345.item3 {
346  order: 2;
347}</pre>
348            <header><h4>HTML+CSS</h4></header>
349            <section class="sample-view">
350                <div class="flex-container">
351                    <div class="flex-item" style="order: 3;">Item 1</div>
352                    <div class="flex-item" style="order: 1;">Item 2</div>
353                    <div class="flex-item" style="order: 2;">Item 3</div>
354                </div>
355            </section>
356          </section>
357        </article>
358        <article>
359            <h3>inline-flex</h3>
360            <section>
361                <header><h4>display: inline-flex</h4></header>
362                <section class="sample-view">
363                  Here is an example of inline-flex:
364                  <div class="inline-container">
365                      <div class="inline-item">1</div>
366                      <div class="inline-item">2</div>
367                      <div class="inline-item">3</div>
368                  </div>
369                  This text is in the same line as the inline-flex container.
370                </section>
371            </section>
372        </article>
373    </main>
374</body>
375</html>

Flexbox và Inline Flexbox

flex 

 1.flex-container {
 2    display: flex;
 3    justify-content: space-between;
 4    align-items: center;
 5    height: 100px;
 6}
 7
 8.flex-item {
 9    background-color: lightskyblue;
10    padding: 10px;
11    margin: 5px;
12    width: 70px;
13    height: auto;
14}

flex là một thuộc tính được sử dụng trong CSS để căn chỉnh và sắp xếp các phần tử một cách hiệu quả, và nó là một phần của hệ thống bố cục flexbox. Hệ thống này chủ yếu dùng để căn chỉnh và phân phối các phần tử con (flex items) bên trong một container một cách dễ dàng và linh hoạt hơn so với float hoặc position truyền thống.

  • Lớp flex-box chỉ định thuộc tính display là flex để áp dụng bố cục flexbox.
  • Thuộc tính justify-content với giá trị space-between đặt các phần tử ở hai đầu trái và phải, đồng thời phân phối đều khoảng cách giữa chúng.
  • Thuộc tính align-items được đặt là center sẽ căn giữa các phần tử theo chiều dọc.

Cấu trúc cơ bản của Flexbox 

 1<div class="flex-container">
 2  <div class="flex-item">Item 1</div>
 3  <div class="flex-item">Item 2</div>
 4  <div class="flex-item">Item 3</div>
 5</div>
 6
 7<style>
 8.flex-container {
 9  display: flex;
10  /* Other flex properties */
11  flex-direction: row | row-reverse | column | column-reverse;
12  justify-content: flex-start | flex-end | center | space-between | space-around;
13  align-items: stretch | flex-start | flex-end | center | baseline;
14  flex-wrap: nowrap | wrap | wrap-reverse;
15}
16.flex-item {
17  /* Styles applied to individual items */
18  flex-grow: 0 | 1 | 2 | ...;
19  flex-shrink: 0 | 1;
20  flex-basis: auto | 10px | 25% | ...;
21  align-self: stretch | flex-start | flex-end | center | baseline;
22  order: 0 | 1 | 2 | ... | -1 | -2 | ...;
23}
24</style>

Flexbox có hai thành phần chính: khung chứa linh hoạt và các mục linh hoạt.

  1. Khung chứa linh hoạt là phần tử cha bao bọc các phần tử con, được xác định bằng cách sử dụng display: flex.
  2. Các mục linh hoạt là các phần tử nằm bên trong khung chứa linh hoạt, tức là các phần tử con trực tiếp của khung chứa.
Các thuộc tính của Container Flex

Các thuộc tính sau có liên quan đến container flex.

  • Chỉ định flex trong thuộc tính display để xác định một container flex. Các phần tử con bên trong trở thành flex items.

  • Thuộc tính flex-direction xác định hướng sắp xếp các flex items. Các giá trị sau có thể được chỉ định:.

    • row: Căn chỉnh theo chiều ngang từ trái sang phải. Đây là giá trị mặc định.
    • row-reverse: Sắp xếp theo chiều ngang từ phải sang trái.
    • column: Sắp xếp theo chiều dọc từ trên xuống dưới.
    • column-reverse: Sắp xếp theo chiều dọc từ dưới lên trên.

  • Thuộc tính justify-content xác định cách các mục flex được sắp xếp theo chiều ngang (theo trục chính).

    • flex-start: Căn về phía đầu (trái).
    • flex-end: Căn về phía cuối (phải).
    • center: Căn giữa.
    • space-between: Chia đều khoảng cách giữa các mục.
    • space-around: Chia đều khoảng cách xung quanh các mục.

  • Thuộc tính align-items xác định cách các mục được sắp xếp theo chiều dọc (theo trục chéo).

    • flex-start: Căn phía trên.
    • center: Căn giữa theo chiều dọc.
    • flex-end: Căn phía dưới.
    • stretch: Kéo dài để lấp đầy chiều cao của khung chứa.
    • baseline: Căn theo đường cơ sở của văn bản.

  • Thuộc tính flex-wrap xác định xem các mục có nên bao bọc nếu chúng vượt quá chiều rộng của khung chứa hay không.

    • nowrap: Không bao bọc. Đây là giá trị mặc định.
    • wrap: Bao bọc các mục.
    • wrap-reverse: Bao bọc các mục theo thứ tự ngược lại.
Các thuộc tính của các mục Flex

Các thuộc tính sau liên quan đến các mục flex.

  • Thuộc tính flex-grow xác định tốc độ tăng của một mục. Giá trị càng lớn, mục chiếm càng nhiều không gian so với các mục khác.

    • Nếu là 0, mục sẽ không tăng kích thước. Đây là giá trị mặc định.
    • Nếu là 1 hoặc lớn hơn, tốc độ tăng sẽ được xác định.

  • Thuộc tính flex-shrink chỉ định tỷ lệ thu nhỏ của một mục. Giá trị càng lớn thì mục đó sẽ thu nhỏ càng nhiều.

    • Nếu là 1, mục đó sẽ thu nhỏ khi không có đủ không gian. Đây là giá trị mặc định.
    • Nếu là 0, mục đó sẽ không thu nhỏ.

  • Thuộc tính flex-basis chỉ định chiều rộng hoặc chiều cao ban đầu của từng mục. Thông thường đây là kích thước dọc theo trục chính. Giá trị mặc định là auto, dựa trên kích thước nội dung, nhưng bạn có thể chỉ định giá trị cố định bằng pixel hoặc phần trăm.

  • Thuộc tính align-self chỉ định cách căn chỉnh một mục flex riêng lẻ theo trục chéo. Nó có thể ghi đè giá trị được chỉ định bởi align-items.

  • Thuộc tính order thay đổi thứ tự hiển thị của các mục flex. Mặc định là 0, nhưng chỉ định một số dương sẽ di chuyển mục đó đến sau, còn số âm sẽ di chuyển sớm hơn.

Ưu điểm của Flexbox

Các ưu điểm của flexbox bao gồm các điểm sau:.

  • Bố trí linh hoạt: Bạn có thể linh hoạt kiểm soát việc căn chỉnh, khoảng cách và hướng của các phần tử.
  • Lý tưởng cho thiết kế đáp ứng: Các phần tử con tự động điều chỉnh theo kích thước của phần tử cha.

inline-flex 

 1.inline-container {
 2    display: inline-flex;
 3    border: 2px solid #000;
 4    padding: 10px;
 5    justify-content: space-between;
 6    background-color: lightblue;
 7    width: 150px;
 8    height: 50px;
 9}
10.inline-item {
11    background-color: lightskyblue;
12    padding: 10px;
13    margin: 5px;
14    width: 20px;
15    height: auto;
16}

  • inline-flex là một kiểu bố trí trong CSS cho phép bạn sắp xếp nội dung bằng flexbox đồng thời căn chỉnh phần tử theo luồng dòng. Nó hoạt động giống với display: flex, nhưng inline-flex làm cho bản thân phần tử xử lý như một phần tử nội dòng.

  • Trong ví dụ này, inline-flex được áp dụng cho lớp container. Do đó, lớp container xử lý như một phần tử cấp nội dòng trong phần tử <div> cha. Đồng thời, các phần tử thuộc lớp item, là các phần tử con trong lớp container, được sắp xếp theo các quy tắc của flexbox. Trong ví dụ này, justify-content: space-between được sử dụng, do đó không gian được phân bố đều giữa các phần tử con.

Các trường hợp sử dụng inline-flex

inline-flex đặc biệt hữu ích trong các trường hợp như:.

  • Khi bạn muốn sử dụng bố cục flex với các phần tử inline Điều này hữu ích khi bạn cần sử dụng flexbox để định vị trong các thành phần giao diện người dùng nhỏ như nút hoặc biểu tượng. Ví dụ, khi bạn muốn căn chỉnh một biểu tượng và văn bản cạnh nhau và căn giữa chúng.

  • Khi xây dựng bố cục phức tạp mà vẫn duy trì luồng inline Nó được sử dụng khi bạn muốn tận dụng sức mạnh của flexbox để làm cho bố cục bên trong linh hoạt trong khi vẫn hoạt động như một phần tử inline. Ví dụ, khi bạn muốn sắp xếp nhiều phần tử trên cùng một hàng và điều chỉnh các phần tử con bên trong chúng.

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.

YouTube Video

Các thuộc tính CSS liên quan đến bố cục