Login

Flexbox từ cơ bản: căn chỉnh bố cục một chiều không còn khó

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Ngày xưa, căn giữa một phần tử theo cả hai chiều là trò đùa quen thuộc của dân lập trình web. Từ khi có Flexbox, việc đó chỉ cần ba dòng CSS. Flexbox được thiết kế để bố trí các phần tử theo một chiều, hàng hoặc cột, và chia không gian một cách linh hoạt.

Kích hoạt Flexbox

Bạn chỉ cần đặt display: flex lên phần tử cha (container). Các con trực tiếp trở thành flex item và xếp thành một hàng.

.menu {
  display: flex;
  gap: 16px;
}
<nav class='menu'>
  <a href='#'>Trang chủ</a>
  <a href='#'>Khóa học</a>
  <a href='#'>Blog</a>
</nav>

Thuộc tính gap tạo khoảng cách đều giữa các item mà không cần margin lẻ tẻ.

Hai trục: chính và phụ

Đây là khái niệm quan trọng nhất. Flexbox có trục chính (main axis) theo hướng bố trí và trục phụ (cross axis) vuông góc với nó. Thuộc tính flex-direction đổi hướng trục chính:

  • row (mặc định): trục chính nằm ngang.
  • column: trục chính hướng xuống dưới.

Hai thuộc tính căn chỉnh thường dùng nhất:

  • justify-content: căn theo trục chính. Giá trị hay gặp: flex-start, center, flex-end, space-between, space-around.
  • align-items: căn theo trục phụ. Giá trị hay gặp: stretch (mặc định), center, flex-start, flex-end.

Khi đổi sang column, vai trò hai thuộc tính đảo theo: justify-content lúc này căn theo chiều dọc.

Công thức căn giữa kinh điển

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Phần tử con của .hero sẽ nằm chính giữa màn hình, cả ngang lẫn dọc.

Thanh điều hướng với logo bên trái, menu bên phải

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

space-between đẩy item đầu về mép trái, item cuối về mép phải, và chia đều phần còn lại. Một mẹo khác là đặt margin-left: auto lên một item để đẩy nó và các item sau sang phải.

Co giãn item với flex-grow, flex-shrink, flex-basis

Ba thuộc tính này điều khiển cách mỗi item chia không gian, thường viết gọn thành flex:

  • flex-basis: kích thước ban đầu trước khi co giãn.
  • flex-grow: tỉ lệ được phép giãn ra khi còn thừa chỗ.
  • flex-shrink: tỉ lệ được phép co lại khi thiếu chỗ.
.sidebar { flex: 0 0 240px; }  /* cố định 240px */
.content { flex: 1; }         /* chiếm phần còn lại */

Với hai dòng trên bạn đã có bố cục hai cột: cột bên rộng 240 pixel và cột nội dung tự giãn.

Xuống dòng với flex-wrap

Mặc định các item cố nhét vào một hàng và có thể bị co lại. Thêm flex-wrap: wrap để chúng tự xuống hàng khi hết chỗ. Kết hợp với flex: 1 1 200px, bạn có một lưới thẻ tự thích ứng với chiều rộng màn hình mà không cần media query.

Những lỗi thường gặp

  1. Đặt display: flex lên item thay vì container. Hãy kiểm tra xem bạn đang ở phần tử cha chưa.
  2. Nhầm justify-content và align-items. Hãy tự hỏi trục chính đang nằm ngang hay dọc.
  3. Item bị co mất khi nội dung dài. Thử min-width: 0 hoặc flex-shrink: 0 tùy mục đích.
  4. Cố dùng Flexbox cho bố cục lưới hai chiều phức tạp, trong khi CSS Grid phù hợp hơn.

Ví dụ: hàng thẻ tự xuống dòng

Đây là mẫu rất hay dùng cho danh sách khóa học hoặc bài viết:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 240px;
  max-width: 360px;
}

Mỗi thẻ có chiều rộng cơ sở 240 pixel và được phép giãn ra để lấp đầy hàng. Khi màn hình hẹp, các thẻ tự xuống dòng. Hãy thử thay đổi kích thước cửa sổ trình duyệt để quan sát: đó là cách học Flexbox nhanh nhất.

Một mẹo nữa là dùng công cụ dành cho nhà phát triển. Trong Chrome và Firefox, bên cạnh phần tử flex container có biểu tượng nhỏ để bật lớp phủ hiển thị các đường căn chỉnh. Bạn sẽ nhìn thấy rõ item nào đang chiếm bao nhiêu không gian và vì sao.

Kết luận

Flexbox giải quyết tốt phần lớn các bố cục hằng ngày: thanh điều hướng, hàng thẻ, căn giữa, form nằm ngang. Hãy nắm chắc khái niệm hai trục và ba thuộc tính flex, bạn sẽ dùng nó rất trôi chảy.

Muốn luyện tập Flexbox trên những giao diện thực tế như landing page hay dashboard, bạn có thể xem các khóa học tại codebem.com.

author_photo
Nguyễn Đình Cường

0 comment