Khi làm việc với CSS, một trong những thách thức lớn nhất là xây dựng layout linh hoạt và dễ kiểm soát. Trước khi Flexbox ra đời, chúng ta thường phải dùng đến float, position hay các hack CSS phức tạp để căn giữa hoặc sắp xếp các phần tử. Nhưng từ khi Flexbox (Flexible Box Layout) xuất hiện, mọi thứ đã trở nên dễ dàng hơn rất nhiều.

Trong bài viết này, CodeTutHub sẽ cùng bạn khám phá:

  • Flexbox là gì?
  • Tại sao nó lại quan trọng?
  • Cách sử dụng các thuộc tính Flexbox phổ biến
  • Một vài ví dụ thực tế để bạn áp dụng ngay.

Flexbox là gì?

Flexbox là một module trong CSS3 cho phép bạn thiết kế layout 1 chiều (một hàng hoặc một cột) dễ dàng hơn bao giờ hết. Nó đặc biệt hữu ích khi bạn muốn sắp xếp, căn giữa hoặc phân bố không gian giữa các phần tử trong một container.

Flexbox hoạt động dựa trên hai thành phần chính:

  • Flex container: phần tử cha – nơi kích hoạt chế độ flex.
  • Flex items: các phần tử con bên trong – chính là những gì bạn muốn sắp xếp.

Cách sử dụng Flexbox

Để bắt đầu, bạn chỉ cần thêm dòng CSS sau vào phần tử cha:

css
display: flex;

Ngay lập tức, tất cả phần tử con sẽ trở thành flex items và chịu sự điều khiển của các thuộc tính Flexbox.

Các thuộc tính chính của Flexbox

1. Trên Flex Container

  • display: flex; – Kích hoạt Flexbox.
  • flex-direction – Quy định hướng:
    • row (mặc định): các item nằm ngang
    • column: các item nằm dọc
    • row-reverse, column-reverse: đảo chiều
  • justify-content – Căn chỉnh theo trục chính (main axis):
    • flex-start, flex-end, center, space-between, space-around, space-evenly
  • align-items – Căn chỉnh theo trục phụ (cross axis):
    • stretch (mặc định), flex-start, flex-end, center, baseline
  • flex-wrap – Cho phép item xuống dòng nếu không đủ chỗ:
    • nowrap (mặc định), wrap, wrap-reverse

2. Trên Flex Items

  • flex – Thuộc tính viết tắt cho flex-grow, flex-shrink, flex-basis
  • align-self – Ghi đè align-items cho từng item
  • order – Thay đổi thứ tự xuất hiện

Ví dụ thực tế

Căn giữa một div:

html
Thử online
<div class="container">
    <div class="box">Nội dung được căn giữa</div>
  </div>

<style>
    .container {
      display: flex;
      justify-content: center; /* Căn giữa theo chiều ngang */
      align-items: center;     /* Căn giữa theo chiều dọc */
      height: 300px;
      background-color: #f0f0f0;
      border: 2px dashed #ccc;
    }

    .box {
      padding: 20px 40px;
      background-color: #4CAF50;
      color: white;
      font-size: 18px;
      border-radius: 8px;
    }
  </style>

💡 Giải thích ví dụ:

  • .container là Flex container – phần tử cha bật chế độ display: flex.
  • justify-content: center căn giữa theo chiều ngang (trục chính).
  • align-items: center căn giữa theo chiều dọc (trục phụ).
  • .box là nội dung con được căn giữa trong khung có chiều cao 300px.

🎯 Kết quả: Một khung có nền xám, bên trong là nút màu xanh chứa dòng chữ "Nội dung được căn giữa", được căn giữa cả theo chiều ngang lẫn dọc – cực dễ nhìn và hay dùng trong các layout hero, modal, banner.

Khi nào nên dùng Flexbox?

Flexbox cực kỳ phù hợp cho các layout 1 chiều như:

  • Menu ngang/dọc
  • Căn giữa nội dung
  • Sắp xếp card, ảnh, button có kích thước linh hoạt
  • Responsive layout đơn giản

Nếu bạn cần layout nhiều chiều phức tạp hơn, hãy cân nhắc sử dụng CSS Grid.

Tổng kết

Flexbox là một công cụ mạnh mẽ trong CSS giúp việc xây dựng layout trở nên trực quan, dễ quản lý và phản hồi tốt trên mọi thiết bị. Bằng cách nắm vững các thuộc tính cơ bản, bạn có thể dễ dàng tạo ra giao diện đẹp và linh hoạt mà không cần đến nhiều dòng code phức tạp.

Có thể bạn muốn biết: Flexbox vs Grid – Dùng cái nào tốt hơn trong CSS?