Flex CSS là một khái niệm quan trọng liên quan đến việc sắp xếp bố cục của các thành phần trên trang web. Vậy chính xác thì Flex, hay Flexbox trong CSS là gì? Làm thế nào để bạn có thể ứng dụng Flexbox CSS để xây dựng website hiệu quả? ITviec sẽ hướng dẫn chi tiết cho bạn trong bài viết này.

Đọc bài viết này để hiểu rõ:

  • Flex CSS là gì?
  • Flexbox CSS là gì?
  • Các thuộc tính Flex cần biết và các ví dụ áp dụng

Flex CSS là gì?

Thuộc tính flex CSS là một lệnh đa năng cho phép các nhà phát triển tạo ra các bố cục linh hoạt và thích ứng cho các trang web. Thuộc tính này cho phép các thành phần của trang web được định kích thước và sắp xếp tương đối với nhau, thay vì phải chỉ định kích thước chính xác.

Thuộc tính flex CSS đặc biệt hữu ích cho thiết kế responsive, vì nó cho phép các thành phần có thể co giãn (tăng hoặc giảm kích thước) để vừa với vùng chứa của các thành phần đó.

Ví dụ: Thanh menu ở 1 trang web có 5 nút sử dụng thuộc tính flex để dàn trải từ trái sang phải, dù cho hiển thị ở thiết bị nào (máy tính, điện thoại) thì tất cả các nút đều tự điều chỉnh kích thước để vừa đủ với vùng chứa của thanh menu.

Bạn sẽ được tìm hiểu chi tiết hơn về thuộc tính Flex CSS ở phần dưới của bài viết này.

Tham khảo thêm các bài viết khác thuộc chủ đề CSS:

Flexbox là gì?

Khái niệm Flex CSS cũng có thể hiểu là đang nói đến Flexbox – 1 module tập hợp nhiều thuộc tính liên quan đến co dãn, sắp xếp linh hoạt của phần tử (hay phương pháp để Flex CSS). Không giống như Grid Layout CSS là hệ thống bố cục hai chiều, Flexbox là một chiều, tập trung vào việc sắp xếp các thành phần dọc theo một trục duy nhất (theo chiều ngang hoặc chiều dọc).

Một trong những lợi ích chính của Flexbox là nó có thể đơn giản hóa code của bạn và làm cho bố cục website linh hoạt hơn. Bạn có thể tạo các bố cục thích ứng với các kích thước màn hình và thiết bị khác nhau, đảm bảo trang web của bạn trông tuyệt vời bất kể người dùng truy cập nó như thế nào. Điều này đặc biệt quan trọng đối với người dùng thiết bị di động, những người có thể truy cập trang web của bạn trên nhiều thiết bị và màn hình khác nhau.

Hình minh họa tổng quan về cấu trúc của Flexbox:

Cùng tìm hiểu chi tiết về các thành phần trong hình này qua nội dung dưới đây.

Các thuật ngữ cần biết về Flexbox CSS

Flex Container and Flex Item

Để sử dụng tất cả các thuộc tính của Flexbox, bạn cần đặt thuộc tính display của một thành phần là flex hoặc inline-flex. Khi này, thành phần đó chính là một flex container và các thành phần con (children) của thành phần đó trở thành các flex item.

Ví dụ:

<section class="container">  
    <div>Flex Item 1</div>  
    <div>Flex Item 2</div>  
    <div>    
     <p>Đoạn paragraph này không phải là một flex item</p>  
    </div>
</section>
.container {  

  display: flex;

}

Trong ví dụ này, thành phần .container bây giờ là một flex container. Ba thành phần div là các con trực tiếp của .container, do đó chúng trở thành các flex item.

display: flex và inline-flex

Như đã viết ở trên, cả display: flex và display: inline-flex đều có thể biến một thành phần thành flex container, nhưng điểm khác biệt nằm ở cách chúng tương tác với các thành phần xung quanh.

  • display: flex

Khi sử dụng display: flex, flex container sẽ hoạt động giống như một khối (block-level element). Nó sẽ chiếm toàn bộ chiều rộng của thành phần cha. Bắt đầu trên một dòng mới và thành phần tiếp theo nó cũng sẽ bắt đầu trên một dòng mới.

Ví dụ:

<button>Button One</button>

/* Flex Container */
<section class="container">  
   <div id="red"></div>  
   <div id="gold"></div>  
   <div id="green"></div>
</section>

<button>Button Two</button>
.container {
display: flex;
}

Trong ví dụ này, thành phần .container sẽ chiếm toàn bộ chiều rộng khả dụng của body (thành phần cha của nó).

  • display: inline-flex

Khi sử dụng display: inline-flex, flex container sẽ hoạt động giống như một phần tử nội dòng (inline-level element). Điều này cho phép các phần tử nội dòng khác (như nút bấm) xếp cạnh nó. Giữ nguyên ví dụ trước, đây là cách các thành phần được sắp xếp khi bạn đổi display từ flex thành inline-flex.

Như bạn thấy, flex container sẽ không chiếm toàn bộ chiều rộng của thành phần cha. Nó chỉ sử dụng chiều ngang cần thiết cho nội dung của nó.

Main axis và Cross axis

Mỗi flex container sẽ có một trục chính (main axis) và một trục phụ (cross axis). Trục chính có thể là ngang hoặc dọc tùy thuộc vào giá trị của thuộc tính flex-direction.

  • Hình ảnh trục chính và trục phụ khi flex-direction là row (dòng).

  • Hình ảnh trục chính và trục phụ khi flex-direction là column (cột).

Tiếp theo, cùng tìm hiểu chi tiết về 13 thuộc tính trong Flexbox CSS.

Thuộc tính Flex CSS

Khi một container đã được thiết lập thuộc tính display: flex hoặc display: inline-flex, bạn có thể áp dụng thuộc tính flex CSS cho bất kỳ phần tử con nào bên trong nó để điều chỉnh sự linh hoạt của chúng trong phạm vi bố cục.

Thuộc tính Flex CSS là 1 thuộc tính rút gọn, nó là viết tắt của việc thiết lập 3 thuộc tính: flex-grow, flex-shrink và flex-basis.

Cú pháp:

flex: none; | [ <'flex-grow'> <'flex-shrink'> | <'flex-basis'> ]

Trong đó, các thuộc tính có ý nghĩa như sau:

  • Flex grow: Thuộc tính flex-grow trong CSS thiết lập hệ số co giãn của một phần tử flex. Nó quy định xem phần tử đó sẽ chiếm bao nhiêu phần không gian còn trống bên trong vùng chứa flex theo kích thước chính của phần tử đó.
  • Flex shrink: Thuộc tính flex-shrink trong CSS thiết lập mức độ co lại của một flex item. Nếu tổng kích thước của tất cả flex item lớn hơn flex container, các item sẽ co lại để vừa với vùng chứa theo tỉ lệ của flex-shrink.
  • Flex basic: Thuộc tính flex-basis trong CSS thiết lập kích thước chính ban đầu của một item flex. Nó thiết lập kích thước của hộp nội dung (content box) trừ khi được thiết lập khác bằng thuộc tính box-sizing.

Bạn có thể điều chỉnh kích thước và tỷ lệ của mỗi mục con trong flex container bằng cách sử dụng thuộc tính flex với các giá trị như tỷ lệ phần trăm, đơn vị ems, hoặc pixel.

Thuộc tính flex có thể chứa tối đa ba giá trị và thứ tự của các giá trị này rất quan trọng. Trình duyệt sẽ gán giá trị đầu tiên cho flex-grow, giá trị thứ hai cho flex-shrink và giá trị thứ ba cho flex-basis. 

Ví dụ:

Các giá trị của thuộc tính flex CSS:

/* Giá trị mặc định */ 

flex: auto; flex: initial; flex: none;

/* Một giá trị, không có đơn vị: flex-grow flex-basis sau đó bằng 0. */ 

flex: 2;

/* Một giá trị, đơn vị width/height: flex-basis */ 

flex: 10em; 

flex: 30%; 

flex: min-content;

/* Hai giá trị: flex-grow | flex-basis */ 

flex: 1 30px;

/* Hai giá trị: flex-grow | flex-shrink */ 

flex: 2 2;

/* Ba giá trị: flex-grow | flex-shrink | flex-basis */ 

flex: 2 2 10%;

/* Giá trị toàn cục */ 

flex: inherit; 

flex: initial; 

flex: revert; 

flex: revert-layer; 

flex: unset;

Thuộc tính flex có thể được chỉ định bằng một, hai hoặc ba giá trị.

  • Cú pháp một giá trị: Giá trị phải là một trong:
      1. Một giá trị hợp lệ cho <flex-grow>. Khi đó tốc ký sẽ mở rộng thành flex: <flex-grow> 1 0.
      2. Một giá trị hợp lệ cho <flex-basis>. Khi đó tốc ký sẽ mở rộng thành flex: 1 1 <flex-basis>.
      3. Từ khóa none hoặc một trong những từ khóa chung.
  • Cú pháp hai giá trị:
    1. Giá trị đầu tiên phải là giá trị hợp lệ cho flex-grow.
    2. Giá trị thứ hai phải là một trong:
      • Một giá trị hợp lệ cho flex-shrink. Khi đó tốc ký sẽ mở rộng thành flex: <flex-grow> <flex-shrink> 0.
      • Một giá trị hợp lệ cho flex-basis. Khi đó tốc ký sẽ mở rộng thành flex: <flex-grow> 1 <flex-basis>.
  • Cú pháp ba giá trị: Các giá trị phải theo thứ tự sau:
    1. Một giá trị hợp lệ cho flex-grow.
    2. Một giá trị hợp lệ cho flex-shrink.
    3. Một giá trị hợp lệ cho flex-basis.

Ví dụ:

.flex-item {  
   flex-grow: 2;  
   flex-shrink: 0;  
   flex-basis: 50px;

}
.flex-item {  
   flex: 2 0 50px;
}

Các giá trị của thuộc tính flex CSS 

Initial

Phần tử được căn chỉnh kích thước dựa trên các thuộc tính width (chiều rộng) và height (chiều cao) của nó. Nó sẽ co lại đến kích thước tối thiểu để vừa với vùng chứa (flex container), nhưng không giãn ra để chiếm bất kỳ khoảng trống thừa nào trong vùng chứa. Điều này tương đương với việc đặt “flex: 0 1 auto”.

Cú pháp:

.item {
  flex: initial;
}

Auto

Trong flexbox, auto quy định kích thước của item theo thuộc tính width và height của nó.

Tuy nhiên, item cũng có thể co giãn để chiếm khoảng trống thừa trong flex container, đồng thời co lại đến kích thước tối thiểu để vừa với container. Thiết lập auto tương đương với việc đặt “flex: 1 1 auto”.

Cú pháp:

.item {
  flex: 1 1 auto;
}

None

Phần tử được căn chỉnh kích thước dựa theo các thuộc tính width (chiều rộng) và height (chiều cao) của nó. Nó hoàn toàn không linh hoạt: nó không co nhỏ hoặc giãn ra để phù hợp với container flex. Điều này tương đương với việc đặt “flex: 0 0 auto”.

Cú pháp:

.item {
  flex: none;
}

Inherit (Thừa kế)

Giá trị này đặt các thuộc tính flex của item được thừa hưởng từ thuộc tính của thành phần cha.

Cú pháp:

.item {
  flex: inherit;
}

Unset (Bỏ thiết lập)

Giá trị này đặt các thuộc tính flex của item về giá trị mặc định nếu trước đó chưa được thiết lập; nếu không, nó sẽ đặt về giá trị được thừa hưởng.

Cú pháp:

.item {
  flex: unset;
}

Revert (Trả về mặc định)

Giá trị này đặt các thuộc tính flex của item về giá trị mặc định như thể chưa từng được thiết lập giá trị nào.

Cú pháp:

.item {
  flex: revert;
}

7 thuộc tính của Flex Container

Sau đây là danh sách các thuộc tính có thể được áp dụng cho flex container.

Thuộc tính Mô tả
Flex-direction Xác định hướng của trục chính cho bố cục của flex container.
Flex-wrap Xác định xem các flex item phải nằm trên cùng một dòng hay có thể tự động xuống dòng khi không đủ chỗ.
Flex-flow Shortcut (ký hiệu rút gọn) cho cả flex-direction và flex-wrap.
Justify-content Căn chỉnh các flex item dọc theo trục chính, phân bổ khoảng trống giữa hoặc xung quanh chúng.
Align-items Căn chỉnh các flex item dọc theo trục vuông góc bên trong container.
Align-content Căn chỉnh các dòng này dọc theo trục phụ.
Place-content Shortcut cho cả 2 thuộc tính justify-content và align-content.

Flex-direction

Thuộc tính flex-direction xác định hướng hiển thị của các flex item. Nó thiết lập trục chính của flex container. Thuộc tính này có thể sử dụng một trong bốn giá trị là row, column, row-reverse, column-reverse.

Cú pháp:

flex-direction: row | row-reverse | column | column-reverse;
Giá trị Mô tả Cú pháp
Row Row là giá trị mặc định. Các item được sắp xếp theo hàng ngang, từ trái sang phải.

flex-direction: row;

Column

 Các item được sắp xếp theo cột, từ trên xuống dưới. flex-direction: column;
Row-Reverse Giống như row nhưng các item được sắp xếp theo thứ tự ngược lại, từ phải sang trái.

flex-direction: row-reverse;

Column-Reverse

 Giống như column nhưng các item được sắp xếp theo thứ tự ngược lại, từ dưới lên trên.

flex-direction: column-reverse;

Ví dụ áp dụng 4 giá trị khác nhau của thuộc tính Flex-direction:

<div class="names-container">  

<p id="jill">1. JILL</p>  
<p id="john">2. JOHN</p>  
<p id="jane">3. JANE</p>  
<p id="jack">4. JACK</p>

</div>

.names-container {  
      display: flex;  
      flex-direction: row | row-reverse | column | column-reverse; 
    /* Các kiểu khác ở đây... */

}

Hãy cùng xem kết quả:

  • Flex-direction: row

  • Flex-direction: column

  • Flex-direction: row-reverse

  • Flex-direction: column-reverse

Flex-wrap

Đôi khi, khoảng trống bên trong flex container sẽ không đủ để chứa các flex item. Trong những trường hợp như vậy, bạn có thể sử dụng flex-wrap. Thuộc tính flex-wrap kiểm soát cách các flex item được bố trí khi không đủ chỗ chứa tất cả trong một dòng.

3 giá trị thường được sử dụng trong thuộc tính này gồm: nowrap, wrap, wrap-reverse.

Cú pháp:

flex-wrap : nowrap | wrap | wrap-reverse;
Giá trị Mô tả Cú pháp
Nowrap Các item được sắp xếp trên một dòng duy nhất. Nếu nội dung của các item vượt quá chiều rộng của flex container, chúng sẽ bị tràn ra ngoài.

flex-wrap: nowrap;

Wrap

 Các item được phép xuống dòng và xếp thành nhiều hàng, theo thứ tự từ trên xuống dưới. flex-wrap: wrap;
Wrap-reverse Các item được phép xuống dòng và xếp thành nhiều hàng, theo thứ tự từ dưới lên trên (ngược lại với wrap).

flex-wrap: wrap-reverse;

Ví dụ áp dụng 3 giá trị khác nhau của thuộc tính Flex-wrap:

<div class="names-container">  

   <p id="jill">1. JILL</p>  
   <p id="john">2. JOHN</p>  
   <p id="jane">3. JANE</p>  
   <p id="jack">4. JACK</p>  
   <p id="sara">5. SARA</p>  
   <p id="seth">6. SETH</p>  
   <p id="seal">7. SEAL</p>

</div>
.names-container {  
   display: flex;  
   flex-direction: row;  
   flex-wrap: nowrap | wrap | wrap-reverse;
   /* Các style khác ở đây... */
}

Hãy cùng xem kết quả:

  • Flex-wrap: nowrap

  • Flex-wrap: wrap

  • Flex-wrap: wrap-reverse

Flex-flow

Thuộc tính flex-flow là một shortcut (ký hiệu rút gọn) cho cả flex-direction và flex-wrap. Điều này có nghĩa là khi bạn sử dụng flex-flow, bạn có thể thiết lập cả hai thuộc tính này chỉ trong một dòng code.

Cú pháp:

flex-flow: <thuộc tính của flex-direction> <thuộc tính của flex-wrap>;

Hoặc flex-flow: <thuộc tính của flex-direction>;

Hoặc flex-flow: <thuộc tính của flex-wrap>;

Ví dụ:

  • Khi sử dụng Flex-direction và flex-wrap
.names-container {  

display: flex;  
flex-direction: column;  
           flex-wrap: wrap;

}
  • Khi sử dụng Flex-flow
.names-container {  

display: flex;  
flex-flow: column wrap;

}

Hình ảnh kết quả:

Justify-content

Thuộc tính justify-content giúp phân bổ khoảng trống thừa còn lại trong trường hợp tất cả flex item trên một dòng đều không linh hoạt (không co giãn được) hoặc linh hoạt nhưng đã đạt đến kích thước tối đa.

6 giá trị thường được sử dụng trong thuộc tính justify-content gồm: flex-start (mặc định), flex-end, center, space-between, space-around, space-evenly.

Cú pháp:

J​​ustify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;
Giá trị Mô tả Cú pháp
Flex-start Các item được căn chỉnh sát vào cạnh bắt đầu của flex container căn chỉnh trên trục chính justify-content: flex-start;
Flex-end Các item được căn chỉnh vào cạnh cuối cùng của flex container căn chỉnh trên trục chính justify-content: flex-end;
Center Các item được dàn đều ra giữa flex container (khoảng trống được chia đều trước và sau các item) và canh chỉnh dọc theo trục chính justify-content: center;
Space-between Các item được dàn đều ra dọc theo trục chính, khoảng trống được chia đều giữa các item và hai rìa của flex container. Phần tử flex item đầu tiên sẽ nằm sát cạnh bắt đầu và phần tử cuối sẽ nằm sát cạnh kết thúc của vùng chứa justify-content: space-between;
Space-around Các item được dàn đều ra, khoảng trống được chia đều giữa các phần tử và xung quanh flex container (tức là có khoảng trống ở đầu và cuối của các phần tử). Trong đó, khoảng trống trước phần tử đầu tiên và sau phần tử cuối cùng bằng một nửa khoảng trống giữa các phần tử liền kề justify-content: space-around;
Space-evenly Các phần tử được dàn đều ra, khoảng trống được chia đều giữa các item và bên ngoài flex container (tương tự space-around nhưng khoảng trống ở đầu và cuối bằng nhau và bằng khoảng trống giữa các phần tử). justify-content: space-evenly;

Hãy cùng xem kết quả khi áp dụng 6 giá trị khác nhau của thuộc tính Justify-content nêu trên trong ví dụ sau:

<div class="names-container">  

<p id="jill">1. JILL</p>  
<p id="john">2. JOHN</p>  
<p id="jane">3. JANE</p>  
<p id="jack">4. JACK</p>

</div>
.names-container {  
   display: flex;  
   justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
   /* Các style khác ở đây... */
}

Hãy xem hình ảnh kết quả:

  • Justify-content: flex-start

  • Justify-content: flex-end

  • Justify-content: center

  • Justify-content: space-between

  • Justify-content: space-around

  • Justify-content: space-evenly

Align-items

Thuộc tính Align-items dùng để căn chỉnh các flex item trên trục phụ của flex container. Nó quyết định vị trí của các item theo hướng vuông góc với trục chính.

Align-items có thể sử dụng nhiều giá trị, dưới đây là 5 giá trị phổ biến nhất: stretch (mặc định), Flex-start, Flex-end, center, baseline.

Cú pháp:

align-items: stretch | flex-start | flex-end | center | baseline; 

Giá trị

 Mô tả Cú pháp
Stretch Nếu các item nhỏ hơn kích thước của container, các item với kích thước tự động sẽ được phóng to đều để lấp đầy container, với điều kiện không vượt quá giới hạn kích thước tối đa của chúng.

align-items: stretch;

Flex-start

 Các item được căn chỉnh sát vào phía đầu của flex container trên trục phụ.   align-items: flex-start;
Flex-end Các item được căn chỉnh sát vào cuối của flex container trên trục phụ.

align-items: flex-end;

Center

 Các item được căn chính giữa trong flex container trên trục phụ. Nếu kích thước của item lớn hơn kích thước của container, item sẽ tràn đều về cả hai phía. align-items: center;
Baseline Các item được căn chỉnh sao cho đường cơ sở (baseline) của chúng thẳng hàng. Item có khoảng cách lớn nhất từ lề đầu của nó đến đường cơ sở sẽ sát lề đầu của dòng. . Đường baseline là đường vô hình mà các ký tự ngồi trên đó.

  align-items: baseline;

Ví dụ khi áp dụng 5 giá trị khác nhau của thuộc tính Align-items:

<div class="names-container">  

<p id="brad">1. Brad</p>  
<p id="beth">2. Beth</p>  
<p id="belle">3. Belle</p> 
<p id="ben">4. Ben</p>

</div>
.names-container {  
   display: flex;  
    align-items: stretch | flex-start | flex-end | center | baseline;
    /* Các style khác ở đây... */

}

Hãy cùng xem kết quả:

  • Align-items: stretch

  • Align-items: flex-start

  • Align-items: flex-end

  • Align-items: center

  • Align-items: baseline

Align-content

Khi bạn có một flex container với flex-wrap (hoặc nhiều hơn một dòng flex), bạn có thể cần căn chỉnh các dòng để phân bổ khoảng trống theo ý muốn. Align-content được áp dụng để điều khiển việc phân bố không gian giữa và xung quanh các dòng trong một flex container dọc theo trục chéo.

Thuộc tính này có những giá trị phổ biến sau: Stretch, Flex-start, Flex-end, Center, Space-between, Space-evenly, Space-around.

Cú pháp:

align-content: stretch | flex-start | flex-end | center | space-between | space-evenly | space-around;

Giá trị

 Mô tả Cú pháp
Stretch Các dòng được kéo giãn để lấp đầy chiều cao khả dụng của flex container trên trục chéo.

align-content: stretch;

Flex-start

 Các items được xếp sát cạnh nhau, dọc theo mép đầu của vùng chứa căn chỉnh trên trục chéo align-content: flex-start;
Flex-end Các items được xếp sát cạnh nhau, dồn về phía mép cuối của vùng chứa căn chỉnh theo trục ngang.

align-content: flex-end;

Center

 Các items được xếp sát cạnh nhau tại trung tâm của vùng chứa căn chỉnh theo trục ngang. align-content: center;
Space-between Các items được phân bố đều nhau trong vùng chứa căn chỉnh theo trục ngang. Khoảng cách giữa mỗi cặp items là bằng nhau. Items đầu tiên sát với mép bắt đầu của vùng chứa và items cuối cùng sát với mép kết thúc của vùng chứa.

align-content: space-between;

Space-evenly

 Các items được phân bố đều nhau trong vùng chứa căn chỉnh theo trục ngang. Khoảng cách giữa từng cặp items liền kề, giữa cạnh đầu và items đầu tiên, giữa cạnh cuối và items cuối cùng hoàn toàn bằng nhau. align-content: space-evenly;
Space-around Các items được phân bố đều nhau bên trong vùng chứa căn chỉnh theo trục ngang. Khoảng cách giữa từng cặp items cạnh nhau là bằng nhau. Khoảng trống trước items đầu tiên và sau items cuối cùng bằng một nửa khoảng cách giữa mỗi cặp items cạnh nhau.

align-content: space-around;

Ví dụ khi áp dụng 7 giá trị khác nhau của thuộc tính Align-item:

<div class="names-container">

<p id="jill">1. JILL</p>  
<p id="john">2. JOHN</p>  
<p id="jane">3. JANE</p>  
<p id="jack">4. JACK</p>  
<p id="benn">5. BENN</p>  
<p id="beth">6. BETH</p>  
<p id="brad">7. BRAD</p>  
<p id="bell">8. BELL</p>  
<p id="kyle">9. KYLE</p>  
<p id="karl">10. KARL</p>  
<p id="kate">11. KATE</p>

</div>
.names-container {  
   display: flex;  
   flex-direction: row;  
   align-content: | stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
/* Các style khác ở đây... */
}

Hãy cùng xem kết quả:

  • Align-content: stretch

  • Align-content: flex-start

  • Align-content: flex-end

  • Align-content: center

  • Align-content: space-between

  • Align-content: space-around

  • Align-content: space-evenly

Place-content

Nếu bạn cần sử dụng cả hai thuộc tính justify-content và align-content thì bạn có thể dùng thuộc tính rút gọn place-content. Thuộc tính này có thể nhận một hoặc hai giá trị:

  • Một giá trị: Khi bạn chỉ cung cấp một giá trị, trình duyệt sẽ áp dụng giá trị đó cho cả justify-content và align-content.
  • Hai giá trị: Khi bạn cung cấp hai giá trị cho place-content, giá trị đầu tiên sẽ được áp dụng cho align-content và giá trị thứ hai cho justify-content.

Cú pháp:

place-content: <align-content> <justify-content>;  

Ví dụ khi sử dụng justify-content và align-content:

.names-container {  

display: flex;  
flex-wrap: wrap;  
align-content: flex-end;  
justify-content: flex-start;  

/* Nội dung khác */

}

Ví dụ khi sử dụng place-content:

names-container {  

display: flex;  
flex-wrap: wrap;  
place-content: flex-end flex-start;  

/* Nội dung khác */

}

Hình ảnh kết quả:

6 thuộc tính của Flex Item

Sau đây là danh sách các thuộc tính có thể được áp dụng cho flex item.

Thuộc tính Mô tả
Order Xác định thứ tự xuất hiện của các flex item trong container.
Align-self Cho phép ghi đè giá trị của align-items cho một flex item cụ thể.
Flex-grow Xác định khả năng tăng trưởng của một flex item so với các item khác.
Flex-shrink Giảm kích thước của flex item nếu không đủ chỗ trong flex container.
Flex-basis Thiết lập kích thước ban đầu của một flex item.
Flex Viết tắt cho flex-grow, flex-shrink và flex-basis.

Order

Thuộc tính order xác định thứ tự xuất hiện của các flex item trong container. Giá trị mặc định của order là 0. Khi gán giá trị khác, bạn cần đảm bảo đó là một số nguyên, các phần tử sẽ được sắp xếp theo thứ tự tăng dần của order, sau đó là theo thứ tự mã code trong file.

Nếu phần tử có order ị là -1 thì nó sẽ đưa phần tử này lên thành phần tử đầu tiên.

Cú pháp:

order: <integer>;

Ví dụ:

<div class="names-container">

<p id="jill">1. JILL</p>
<p id="john">2. JOHN</p>
<p id="jane">3. JANE</p>
<p id="jack">4. JACK</p>

</div>
  • Đây là hình ảnh hiển thị khi không có thuộc tính order

  • Đây là hình ảnh hiển thị khi có thuộc tính order
.names-container {  
    display: flex;
}

#jill {  
    order: 2;  
    background-color: #fe4f46;
}

#john {  
    order: 4;  
    background-color: #fcd65c;
}

#jane {  
    order: 1;  
    background-color: 
    #00bab4;
}

#jack {  
    order: 3;  
    background-color: #003f54;
}

Align-self

Align-self cho phép ghi đè giá trị của align-items cho một flex item cụ thể. Cách hoạt động của nó tương tự như thuộc tính align-item.

Điểm khác biệt chính là align-items áp dụng cho tất cả các flex item trong container, còn align-self chỉ áp dụng cho các item cụ thể mà bạn chọn.

Cú pháp:

align-self: auto;

Ví dụ:

<div class="names-container">
   <p id="jill">1. JILL</p>
   <p id="john">2. JOHN</p>
   <p id="jane">3. JANE</p>
   <p id="jack">4. JACK</p>
</div>
.names-container {  
    display: flex;  
    align-items: center;  
    /* Các style khác */    
}

#jill {
align-self: flex-start;
}

Flex-grow

Khi bạn cài đặt display của một container thành flex (dùng flexbox), các flex item thường dồn về bên trái, khiến phía sau flex item cuối cùng bị dư ra một khoảng trống. Khi này, bạn có thể sử dụng flex-grow để tăng kích thước của flex item so với các item khác để lấp đầy khoảng trống này.

Nếu bạn chỉ thêm giá trị flex-grow: 1 cho một trong các flex item, trình duyệt sẽ phân bổ toàn bộ khoảng trống thừa cho item đó.

Cú pháp:

flex-grow: <number>;

Lưu ý: Nếu chỉ có một item trong container có giá trị flex-grow, thì bất kỳ giá trị nào từ 1 trở lên sẽ chiếm toàn bộ khoảng trống thừa.

Ví dụ:

<div class="names-container">

<p id="jill">1. JILL</p>
<p id="john">2. JOHN</p>
<p id="jane">3. JANE</p>
<p id="jack">4. JACK</p>

</div>
.names-container {
       display: flex;
       justify-content: flex-start;  
       /* Các style khác ở đây */  }
  • Khi chưa áp dụng flex-grow

  • Khi đã áp dụng flex-grow: 0.5
#jill {

flex-grow: 0.5;

}

  • Khi đã áp dụng flex-grow: 1
#jill {

flex-grow: 1;

}

Flex-shrink

Thuộc tính flex-shrink hoạt động ngược lại với flex-grow. Bạn sử dụng flex-grow khi muốn tăng kích thước của flex item nếu có thêm khoảng trống. Ngược lại, bạn sử dụng flex-shrink khi muốn giảm kích thước của flex item nếu không đủ chỗ trong flex container.

Cú pháp:

flex-shrink: <number>;

Ví dụ:

<div class="numbers-container">
    <p id="one">1</p>
    <p id="two">2</p>
    <p id="three">3</p>
    <p id="four">4</p>
</div>

.numbers-container {  
    display: flex;  
    justify-content: flex-start;  
    /* Các style khác */
}
#one {  
    flex-shrink: 2;  
    background-color: #fe4f46;
}

Để ngăn một mục flex bị co lại, bạn có thể đặt cho item giá trị flex-shrink bằng 0. Khi này, kết quả bạn nhận được sẽ như sau:

 

Flex-basis

Thuộc tính flex-basis cho phép bạn thiết lập kích thước mặc định của một flex item cụ thể. Kích thước này có thể là chiều rộng hoặc chiều cao của item tùy thuộc vào flex-direction (trục chính của flex container).

  • Nếu flex-direction được đặt thành row hoặc row-reverse (trục chính theo hàng), thì giá trị của flex-basis sẽ trở thành chiều rộng ban đầu của item.
  • Nếu flex-direction được đặt thành column hoặc column-reverse (trục chính theo cột), thì giá trị của flex-basis sẽ trở thành chiều cao ban đầu của item.

Cú pháp:

flex-basis: <length>;

Ví dụ:

<div class="names-container">

<p id="jill">1. JILL</p>
<p id="john">2. JOHN</p>
<p id="jane">3. JANE</p>
<p id="jack">4. JACK</p>

</div>
  • Thiết lập các item theo chiều cao
.names-container {  

display: flex;  
flex-direction: column;  

/* Các style khác */

}

div {  
height: 20px;

}

#jane {  
flex-basis: 60px;

}

Hình ảnh kết quả:

  • Thiết lập các item theo chiều rộng
.names-container {  

display: flex;  
flex-direction: row;  

    /* Các kiểu khác */

}

div {  
width: 70px;

}

#jane {  
flex-basis: 140px;

}

Hình ảnh kết quả:

Các câu hỏi thường gặp về Flex CSS và Flexbox CSS

Một số lỗi phổ biến mà mọi người mắc phải khi sử dụng Flexbox là gì?

  • Không thiết lập chiều rộng hoặc chiều cao cho flex container: Nếu không có các kích thước này, các flex item (thành phần con) sẽ không biết cách căn chỉnh kích thước của chúng.
  • Không thiết lập trục chính khi muốn sắp xếp theo cột (flex-direction): Theo mặc định, các flex item được sắp xếp theo hàng từ trái sang phải. Nếu bạn muốn chúng được sắp xếp theo cột từ trên xuống dưới, bạn cần đặt thuộc tính flex-direction thành column.
  • Quên thiết lập thuộc tính justify-content: Thuộc tính justify-content kiểm soát khoảng cách giữa các flex item dọc theo trục chính. Nếu không thiết lập thuộc tính này, các flex item sẽ bị dồn chặt vào nhau.

Điều gì xảy ra nếu đặt display:flex trên mọi thành phần trong trang web?

Nếu bạn đặt display: flex; cho tất cả các thành phần (element) trên trang web, thì mọi thành phần đó sẽ trở thành flex container.

Điều này có thể dẫn đến một số kết quả không mong muốn, vì các flex container sẽ cố gắng thay đổi kích thước và sắp xếp lại tất cả các thành phần con (child element) bên trong chúng để vừa với khoảng trống có sẵn.

Cách sử dụng Flexbox cho bố cục nhiều cột trong HTML?

Flexbox là một công cụ mạnh mẽ để tạo bố cục nhiều cột trong code HTML của bạn. Bằng cách sử dụng các thuộc tính flex-direction, flex-wrap và justify-content, bạn có thể kiểm soát hướng, ngắt dòng và căn chỉnh nội dung.

Điều này giúp bạn dễ dàng tạo các bố cục phức tạp mà thông thường sẽ khó thực hiện được.

Tổng kết Flex CSS và Flexbox CSS

Có thể thấy, Flexbox CSS là một công cụ hữu ích giúp bạn tạo nên sự linh hoạt trong bố cục mỗi trang web. Với 13 bộ thuộc tính cho cả flex container và flex item trong mô-đun bố cục flexbox, bạn hoàn toàn có thể phát triển những thiết kế phức tạp và linh hoạt, có thể đáp ứng yêu cầu linh hoạt trên các thiết bị khác nhau. 

Hy vọng rằng, những thông tin chi tiết về cách dùng flex CSS và flexbox CSS trong bài viết trên sẽ giúp ích thật nhiều cho bạn. Đừng quên theo dõi ITviec mỗi ngày để cập nhật nhiều kiến thức mới và hữu ích nhé.