CSS Flexbox – Cách sử dụng Flexbox trong CSS

Posted by Lập Trình Viên CSS 10 phút đọc

CSS3 Flexible boxes, còn được gọi là CSS Flexbox, là một mode layout mới trong CSS3. Nó được sử dụng để định vị các phần tử một cách dễ dàng và linh hoạt với nhiều kích thước màn hình và các thiết bị hiển thị khác nhau. Flexbox cung cấp một cách tiết kiệm và hiệu quả hơn để định vị các phần tử, căn chỉnh và phân phối không gian giữa các mục trong bộ chứa. Nó được ưu tiên hơn so với mô hình block truyền thống.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Flexbox là gì

CSS Flexbox giúp chúng ta có thể xử lý layout cho website của mình một cách dễ dàng, linh hoạt và hiệu quả. Nó cho phép chúng ta định vị các phần tử trong một bộ chứa với khả năng tùy biến cao và đáp ứng với nhiều kích thước màn hình khác nhau.

Một điểm đáng chú ý khác của Flexbox là cách nó xử lý các phần tử con trong bộ chứa. Mỗi phần tử con được hiển thị theo chiều ngang hoặc dọc và có thể căn chỉnh với các phần tử khác trong bộ chứa một cách dễ dàng.

Hướng dẫn CSS Flexbox

Để sử dụng Flexbox trong CSS3, chúng ta cần thực hiện ba bước đơn giản sau:

  1. Đặt thuộc tính display của bộ chứa thành flex hoặc inline-flex. Việc này sẽ cho trình duyệt biết rằng chúng ta muốn áp dụng Flexbox vào bộ chứa.
  2. Sử dụng thuộc tính flex-direction để xác định hướng của các phần tử con trong bộ chứa. Có 4 giá trị có thể sử dụng cho thuộc tính này, bao gồm: row, column, row-reverse, và column-reverse.
  3. Sử dụng các thuộc tính khác như justify-content, align-items, và flex-wrap để điều chỉnh khoảng cách giữa các phần tử con trong bộ chứa.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 200px;
    background-color: lightpink;
}
.flex-item {
    background-color: brown;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>
</body>
</html>

Chúng ta có thể sử dụng nhiều thuộc tính khác để tùy chỉnh cho Flexbox phù hợp với yêu cầu của website. Sau đây là danh sách các thuộc tính quan trọng trong CSS Flexbox:

Thuộc tính hiển thị

Thuộc tính display được sử dụng để chỉ định loại hộp được sử dụng cho một phần tử HTML.

Thuộc tính hướng

Thuộc tính flex-direction xác định hướng của các phần tử con trong bộ chứa.

Thuộc tính phân phối vị trí

Thuộc tính justify-content được sử dụng để căn chỉnh các phần tử con theo chiều ngang, khi khoảng trống giữa chúng không sử dụng hết không gian trên trục chính.

Thuộc tính căn chỉnh

Thuộc tính align-items được sử dụng để căn chỉnh các phần tử con theo chiều dọc, khi khoảng trống giữa chúng không sử dụng hết không gian trên trục phụ.

Thuộc tính cuộn

Thu ộc tính flex-wrap được sử dụng để xác định liệu các phần tử con có nên bắt đầu xuống dòng khi không còn đủ không gian trên một dòng hay không.

Thuộc tính căn chỉnh các dòng

Thuộc tính align-content tương tự như align-items, nhưng được sử dụng để căn chỉnh các dòng của phần tử con trong bộ chứa.

Thuộc tính viễn thông linh hoạt

Thuộc tính flex-flow là một thuộc tính rút gọn cho flex-direction và flex-wrap.

Thuộc tính thứ tự

Thuộc tính order xác định thứ tự của một phần tử con so với các phần tử khác trong bộ chứa.

Thuộc tính căn chỉnh phần tử con

Thuộc tính align-self được sử dụng để ghi đè lên giá trị của align-items của bộ chứa cho một phần tử con cụ thể.

Thuộc tính đàn hồi

Thuộc tính flex xác định chiều cao và chiều rộng của một phần tử con so với các phần tử khác trong bộ chứa.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    direction: rtl;
}
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 200px;
    background-color: lightpink;
}
.flex-item {
    background-color: brown;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>
</body>
</html>

Ưu và nhược điểm CSS Flexbox

CSS Flexbox có nhiều ưu điểm, bao gồm:

  • Dễ dàng tùy biến và đáp ứng với các kích thước màn hình khác nhau.
  • Giúp xử lý layout cho website một cách dễ dàng và hiệu quả.
  • Cho phép căn chỉnh vị trí của các phần tử con bên trong bộ chứa một cách linh hoạt và dễ dàng.
  • Giúp giảm thiểu việc sử dụng float, positioning và inline-block.

Tuy nhiên, CSS Flexbox cũng có một số nhược điểm, bao gồm:

  • Chưa được hỗ trợ đầy đủ trên một số trình duyệt cũ.
  • Có thể gây ra sự khó khăn khi xử lý một số layout phức tạp.

Lời khuyên CSS Flexbox

Để sử dụng CSS Flexbox hiệu quả và đạt được hiệu suất tốt nhất, chúng ta nên tuân thủ các quy tắc sau:

  • Tìm hiểu kỹ về các thuộc tính và cách sử dụng chúng để có thể áp dụng CSS Flexbox một cách chính xác và hiệu quả.
  • Sử dụng các tiêu chuẩn HTML và CSS đúng cách để tránh các lỗi không mong muốn.
  • Kiểm tra và đảm bảo rằng Flexbox hoạt động tốt với các trình duyệt khác nhau.
  • Sử dụng các công cụ hỗ trợ để kiểm tra và sửa lỗi.

1. Tại sao nên sử dụng Flexbox?

CSS Flexbox giúp chúng ta xử lý layout cho website một cách dễ dàng, linh hoạt và hiệu quả. Nó cho phép định vị các phần tử bên trong một bộ chứa với khả năng tùy biến cao và đáp ứng với nhiều kích thước màn hình khác nhau.

2. CSS Flexbox có được hỗ trợ trên tất cả các trình duyệt không?

Flexbox đã được hỗ trợ trên hầu hết các trình duyệt nhưng vẫn chưa được hỗ trợ đầy đủ trên một số trình duyệt cũ. Nên kiểm tra và đảm bảo rằng Flexbox hoạt động tốt trên các trình duyệt khác nhau.

3. Flexbox có thể sử dụng để xử lý layout phức tạp không?

Flexbox có thể sử dụng để xử lý nhiều loại layout khác nhau, từ đơn giản đến phức tạp. Tuy nhiên, với một số layout phức tạp, Flexbox có thể gây ra sự khó khăn khi xử lý.

4. Làm thế nào để sử dụng CSS Flexbox?

Để sử dụng CSS Flexbox, chúng ta cần áp dụng các thuộc tính Flexbox vào các phần tử HTML của mình. Thông thường, chúng ta sẽ đặt các thuộc tính này vào cho bộ chứa (container) để kiểm soát layout của các phần tử con bên trong.

5. Có nên sử dụng CSS Flexbox thay cho Grid system?

Không nên sử dụng Flexbox thay cho Grid system, bởi vì chúng có các tính năng khác nhau. Grid system được thiết kế để xử lý layout theo hàng và cột, trong khi CSS Flexbox được thiết kế để xử lý layout theo dòng và cột. Điều này có nghĩa là chúng ta nên sử dụng Grid system để xử lý các layout phức tạp mà yêu cầu sự chính xác cao, trong khi sử dụng Flexbox để xử lý các layout đơn giản hơn.