Khi xây dựng giao diện web, việc căn chỉnh bố cục, phân phối khoảng cách và sắp xếp các phần tử sao cho hợp lý là một thử thách mà front-end developer thường xuyên gặp phải. Bootstrap đã đơn giản hóa toàn bộ quá trình này với hệ thống Flexbox tiện ích tích hợp sẵn. Đây là phương pháp tổ chức giao diện linh hoạt, dễ dùng và cực kỳ hiệu quả, đặc biệt khi bạn cần tạo layout nhanh chóng mà vẫn đảm bảo responsive.
Đọc bài viết này để hiểu hơn về:
- Flexbox trong Bootstrap là gì?
- Cách sử dụng các class Flex cơ bản và nâng cao
- Kỹ thuật responsive với Flex
- Cách khắc phục lỗi thường gặp khi sử dụng Flexbox trong Bootstrap
Flexbox trong Bootstrap là gì?
Flexbox là gì?
Flexbox (viết tắt của Flexible Box Layout) là một mô hình bố cục được thiết kế để quản lý việc sắp xếp, căn chỉnh và phân chia không gian giữa các phần tử trong một container. Điều này đặc biệt hữu ích khi bạn cần tạo giao diện linh hoạt, responsive và dễ kiểm soát về chiều ngang lẫn chiều dọc.
Trong Bootstrap 5, Flexbox được tích hợp thông qua một bộ tiện ích class (utility classes), giúp bạn:
- Biến một phần tử thành flex container với d-flex hoặc d-inline-flex
- Căn chỉnh con theo trục chính hoặc trục phụ (justify-content-*, align-items-*)
- Kiểm soát thứ tự (order-*), khả năng co giãn (flex-grow, flex-shrink)
- Hỗ trợ responsive theo breakpoint (d-flex, flex-row, flex-column theo md, lg, v.v.)
Hình ảnh minh họa sử dụng Flexbox để tùy chỉnh vị trí phần tử.
Tại sao nên dùng Flexbox trong Bootstrap?
Với Flexbox, Bootstrap giúp bạn quản lý bố cục cho column, navbar, button group, card component và nhiều thành phần khác một cách nhanh chóng nhưng vẫn đảm bảo mã sạch và gọn gàng. Vai trò của việc sử dụng Flexbox Bootstrap bao gồm:
- Xây dựng trang web nhanh chóng: Bạn chỉ cần nhớ tên class trong Flexbox, không cần viết CSS
- Sử dụng linh hoạt: Có thể áp dụng từ bố cục lớn đến từng phần tử nhỏ
- Hỗ trợ Responsive: Hỗ trợ các breakpoint (sm, md, lg, xl, xxl)
- Tối ưu hóa làm việc nhóm: Giúp cả nhóm thống nhất cách tổ chức layout, dễ bảo trì và mở rộng về sau
Đọc thêm: Responsive trong Bootstrap: Hướng dẫn từ cơ bản đến nâng cao
Kích hoạt Flex với d-flex và d-inline-flex
Để bắt đầu sử dụng Flexbox trong Bootstrap, bạn cần kích hoạt chế độ Flex cho một phần tử. Điều này được thực hiện bằng cách áp dụng một trong hai class tiện ích:
d-flex
Biến phần tử thành block-level flex container (hiển thị như display: flex)
<div class="d-flex p-2 bd-highlight bg-light">
Đây là một vùng chứa sử dụng flexbox
</div>Kết quả:
Trong đó:
- Phần tử div sẽ chiếm toàn bộ chiều ngang (block-level)
- Các phần tử con bên trong (nếu có) sẽ tự động trở thành flex items
- Bạn có thể áp dụng các tiện ích như
justify-content-between,align-items-center
d-inline-flex
Biến phần tử thành inline-level flex container (hiển thị như display: inline-flex)
<div class="d-inline-flex p-2 bd-highlight bg-light">
Đây là một vùng chứa sử dụng inline flex
</div>Kết quả:
Trong đó:
- Phần tử div sẽ chỉ chiếm đúng kích thước nội dung của nó (giống như
display: inline) - Cũng có thể áp dụng tất cả các thuộc tính flex giống như
d-flex
Từ đây có thể thấy, Flexbox CSS là công cụ gốc do trình duyệt cung cấp, cho phép tạo layout linh hoạt thông qua việc viết CSS thủ công. Trong khi đó, Flexbox Bootstrap là tập hợp các class tiện ích được dựng sẵn, giúp bạn áp dụng các tính năng của Flexbox CSS một cách nhanh chóng, không cần can thiệp trực tiếp vào mã CSS.
Bạn có thể đọc thêm về flex và inline-flex để hiểu hơn về cơ chế hoạt động của nó.
Điều chỉnh hướng hiển thị với flex-direction
Trong Flexbox, thuộc tính flex-direction được sử dụng để xác định hướng sắp xếp của các phần tử con (flex items) bên trong phần tử cha (flex container). Bootstrap cung cấp các lớp tiện ích (utility classes) để giúp bạn điều chỉnh hướng hiển thị một cách dễ dàng mà không cần viết CSS thủ công.
Có bốn class chính để định dạng flex-direction mà bạn có thể sử dụng:
.flex-row
Sắp xếp các phần tử theo hàng ngang, từ trái sang phải (theo mặc định của trình duyệt):
<div class="d-flex flex-row">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>Kết quả:
Trong đó:
d-flex: Biến phần tử cha thành một flex container.flex-row: Các phần tử Flex item 1, Flex item 2, Flex item 3 được xếp liền kề nhau theo chiều ngang
.flex-row-reverse
Sắp xếp theo hàng ngang nhưng từ phải sang trái:
<div class="d-flex flex-row-reverse">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>Kết quả:
Trong đó:
d-flex: Thiết lập flex container.flex-row-reverse: Đổi hướng trục chính, các phần tử liền kề nhau theo chiều ngang nhưng với hướng ngược lại Flex item 3, Flex item 2, Flex item 1
.flex-column
Sắp xếp theo cột dọc, từ trên xuống dưới:
<div class="d-flex flex-column">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>Kết quả:
Trong đó:
d-flex: Thiết lập flex container.flex-column: Đặt trục chính theo chiều dọc từ trên xuống dưới.- Các phần tử Flex item 1, Flex item 2, Flex item 3 được xếp theo cột, từ trên xuống dưới. Mỗi phần tử nằm trên một dòng riêng biệt.
.flex-column-reverse
Sắp xếp theo cột dọc nhưng từ dưới lên trên:
<div class="d-flex flex-column-reverse">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>Kết quả:
Trong đó:
d-flex: Kích hoạt flex container.flex-column-reverse: Thiết lập trục dọc nhưng đảo ngược, từ dưới lên trên.- Mặc dù các phần tử Flex item 1, Flex item 2, Flex item 3 được đặt theo thứ tự 1 -> 2 -> 3 trong code, nhưng lại được hiển thị theo hướng ngược lại.
Canh chỉnh theo trục chính: justify-content-*
Trong Flexbox, trục chính (main axis) là trục mà các phần tử con (flex items) được sắp xếp theo mặc định:
- Trục ngang (trái → phải) nếu sử dụng .flex-row (flex-direction: row)
- Trục dọc (trên → dưới) nếu sử dụng .flex-column (flex-direction: column)
Lớp tiện ích justify-content-* trong Bootstrap cho phép bạn canh chỉnh các phần tử theo trục chính, tức là xác định vị trí bắt đầu, kết thúc, hoặc phân phối khoảng cách giữa chúng một cách linh hoạt.
Các tùy chọn canh chỉnh với justify-content-*
justify-content-start – Canh trái (hoặc trên)
Các phần tử được canh sát về đầu trục chính (trái nếu row, trên nếu column):
<div class="border d-flex justify-content-start">
<div class="m-2 p-2 bg-primary">Flex item 1</div>
<div class="m-2 p-2 bg-primary">Flex item 2</div>
<div class="m-2 p-2 bg-primary">Flex item 3</div>
</div>Kết quả:
Trường hợp trục dọc:
<div class="border d-flex flex-column justify-content-start">
<div class="m-2 p-2 bg-primary">Flex item 1</div>
<div class="m-2 p-2 bg-primary">Flex item 2</div>
<div class="m-2 p-2 bg-primary">Flex item 3</div>
</div>Kết quả:
justify-content-end – Canh phải (hoặc dưới)
Các phần tử dính sát mép phải của container:
<div class="border d-flex justify-content-end">
<div class="m-2 p-2 bg-primary">Flex item 1</div>
<div class="m-2 p-2 bg-primary">Flex item 2</div>
<div class="m-2 p-2 bg-primary">Flex item 3</div>
</div>Kết quả:
Trường hợp trục chính là trục dọc:
<div class="border d-flex flex-column justify-content-end">
<div class="m-2 p-2 bg-primary">Flex item 1</div>
<div class="m-2 p-2 bg-primary">Flex item 2</div>
<div class="m-2 p-2 bg-primary">Flex item 3</div>
</div>Kết quả:
justify-content-center – Canh giữa
Các phần tử nằm giữa khối container, có khoảng trống đều ở hai bên:
<div class="border d-flex justify-content-center">
<div class="m-2 p-2 bg-primary">Flex item 1</div>
<div class="m-2 p-2 bg-primary">Flex item 2</div>
<div class="m-2 p-2 bg-primary">Flex item 3</div>
</div>Kết quả:
justify-content-between – Dàn đều hai đầu
Phần tử đầu và cuối nằm sát hai mép trái/phải, phần tử giữa nằm giữa, không có khoảng trống ngoài cùng:
<div class="border d-flex justify-content-between">
<div class="m-2 p-2 bg-primary">Flex item 1</div>
<div class="m-2 p-2 bg-primary">Flex item 2</div>
<div class="m-2 p-2 bg-primary">Flex item 3</div>
<div class="m-2 p-2 bg-primary">Flex item 4</div>
</div>Kết quả:
justify-content-around – Dàn đều có khoảng đệm ngoài
Khoảng cách giữa các phần tử bằng nhau, có thêm khoảng trống ở hai bên ngoài cùng:
<div class="border d-flex justify-content-around">
<div class="m-2 p-2 bg-primary">Flex item 1</div>
<div class="m-2 p-2 bg-primary">Flex item 2</div>
<div class="m-2 p-2 bg-primary">Flex item 3</div>
<div class="m-2 p-2 bg-primary">Flex item 4</div>
</div>Kết quả:
justify-content-evenly – Dàn đều tuyệt đối
Khoảng cách giữa tất cả các phần tử và cả hai mép ngoài hoàn toàn bằng nhau:
<div class="border d-flex justify-content-evenly">
<div class="m-2 p-2 bg-primary">Flex item 1</div>
<div class="m-2 p-2 bg-primary">Flex item 2</div>
<div class="m-2 p-2 bg-primary">Flex item 3</div>
<div class="m-2 p-2 bg-primary">Flex item 4</div>
</div>Kết quả:
Canh chỉnh theo trục phụ: align-items-*
Trong Flexbox, trục phụ (cross axis) là trục vuông góc với trục chính. Mặc định, khi flex-direction: row, trục phụ là trục dọc (y-axis). Ngược lại, nếu flex-direction: column, thì trục phụ là trục ngang (x-axis).
Các lớp tiện ích align-items-* trong Bootstrap cho phép bạn canh chỉnh các phần tử flex theo chiều trục phụ, tức là xác định vị trí dọc của các phần tử (nếu hiển thị theo hàng ngang).
Các tùy chọn canh chỉnh với align-items-*:
align-items-start – Canh về phía đầu trục phụ (trên cùng)
Các phần tử được căn về phía đầu trục phụ, tức là sát mép trên (nếu trục phụ là dọc), bất kể chiều cao của chúng:
<div class="border d-flex align-items-start">
<div class="m-2 p-2 bg-primary">Flex item 1</div>
<div class="m-2 p-2 bg-primary">Flex item 2</div>
<div class="m-2 p-2 bg-primary">Flex item 3</div>
<div class="m-2 p-2 bg-primary">Flex item 4</div>
</div>
Hoặc nếu trục phụ là trục ngang:
<div class="border d-flex flex-column align-items-start">
<div class="m-2 p-2 bg-primary">Flex item 1</div>
<div class="m-2 p-2 bg-primary">Flex item 2</div>
<div class="m-2 p-2 bg-primary">Flex item 3</div>
<div class="m-2 p-2 bg-primary">Flex item 4</div>
</div>
align-items-end – Canh về cuối trục phụ (dưới cùng)
Các phần tử được đẩy về cuối trục phụ, tức là mép dưới của container (nếu trục phụ là dọc) và tạo khoảng trống phía trên nếu chiều cao container lớn hơn phần tử:
<div class="border d-flex align-items-end">
<div class="m-2 p-2 bg-primary">Flex item 1</div>
<div class="m-2 p-2 bg-primary">Flex item 2</div>
<div class="m-2 p-2 bg-primary">Flex item 3</div>
<div class="m-2 p-2 bg-primary">Flex item 4</div>
</div>
Hoặc nếu trục phụ là trục ngang:
<div class="border d-flex flex-column align-items-end">
<div class="m-2 p-2 bg-primary">Flex item 1</div>
<div class="m-2 p-2 bg-primary">Flex item 2</div>
<div class="m-2 p-2 bg-primary">Flex item 3</div>
<div class="m-2 p-2 bg-primary">Flex item 4</div>
</div>
align-items-center – Căn giữa theo trục phụ
Các phần tử được căn giữa theo chiều của trục phụ, nằm giữa container và để lại khoảng trống đều đều ở trên và dưới (nếu trục phụ là trục dọc):
<div class="border d-flex align-items-center">
<div class="m-2 p-2 bg-primary">Flex item 1</div>
<div class="m-2 p-2 bg-primary">Flex item 2</div>
<div class="m-2 p-2 bg-primary">Flex item 3</div>
<div class="m-2 p-2 bg-primary">Flex item 4</div>
</div>
Hoặc nếu trục phụ là trục ngang:
<div class="border d-flex flex-column align-items-center">
<div class="m-2 p-2 bg-primary">Flex item 1</div>
<div class="m-2 p-2 bg-primary">Flex item 2</div>
<div class="m-2 p-2 bg-primary">Flex item 3</div>
<div class="m-2 p-2 bg-primary">Flex item 4</div>
</div>
Sử dụng align-self-* cho từng phần tử
Nếu như .align-items-* giúp bạn căn chỉnh toàn bộ các phần tử trong container theo trục phụ (cross axis), thì .align-self-* lại cho phép bạn tùy chỉnh vị trí của từng phần tử một cách riêng biệt.
Điều này cực kỳ hữu ích khi bạn muốn tạo điểm nhấn cho một thành phần nhất định trong giao diện, ví dụ như một nút kêu gọi hành động (CTA) nằm lệch xuống dưới, hoặc một icon được đẩy lên trên giữa các phần tử khác.
Các tùy chọn canh chỉnh từng phần tử riêng biệt với align-self-*:
align-self-start – Căn về phía đầu trục phụ (trên hoặc trái)
Phần tử sử dụng lớp này sẽ được căn sát mép đầu của trục phụ. Nếu trục phụ là trục dọc (mặc định khi dùng flex-row), phần tử sẽ nằm ở phía trên cùng container.
<div class="border d-flex" style="height: 100px;">
<div class="m-2 p-2 bg-primary text-white">Flex item 1</div>
<div class="m-2 p-2 bg-success text-white align-self-start">Start</div>
<div class="m-2 p-2 bg-primary text-white">Flex item 3</div>
</div>
Hoặc nếu trục phụ là trục ngang (flex-column), phần tử sẽ nằm ở bên trái container:
<div class="border d-flex flex-column" style="width: 200px;">
<div class="m-2 p-2 bg-primary text-white">Flex item 1</div>
<div class="m-2 p-2 bg-success text-white align-self-start">Start</div>
<div class="m-2 p-2 bg-primary text-white">Flex item 3</div>
</div>
align-self-end – Căn về phía cuối trục phụ (dưới hoặc phải)
Phần tử được đẩy xuống mép cuối trục phụ, tạo khoảng trống ở phía trước nếu container cao hơn phần tử.
<div class="border d-flex" style="height: 100px;">
<div class="m-2 p-2 bg-primary text-white">Flex item 1</div>
<div class="m-2 p-2 bg-danger text-white align-self-end">End</div>
<div class="m-2 p-2 bg-primary text-white">Flex item 3</div>
</div>
Hoặc trong flex-column (trục phụ nằm ngang), phần tử sẽ được đẩy sang phải:
<div class="border d-flex flex-column" style="width: 150px;">
<div class="m-2 p-2 bg-primary text-white">Flex item 1</div>
<div class="m-2 p-2 bg-danger text-white align-self-end">End</div>
<div class="m-2 p-2 bg-primary text-white">Flex item 3</div>
</div>
align-self-center – Căn giữa theo trục phụ
Phần tử sẽ được đặt vào giữa trục phụ, giữa phần đầu và cuối container.
<div class="border d-flex" style="height: 100px;">
<div class="m-2 p-2 bg-primary text-white">Flex item 1</div>
<div class="m-2 p-2 bg-warning text-dark align-self-center">Center</div>
<div class="m-2 p-2 bg-primary text-white">Flex item 3</div>
</div>
Nếu là flex-column, phần tử nằm chính giữa theo chiều ngang:
<div class="border d-flex flex-column" style="width: 150px;">
<div class="m-2 p-2 bg-primary text-white">Flex item 1</div>
<div class="m-2 p-2 bg-warning text-dark align-self-center">Center</div>
<div class="m-2 p-2 bg-primary text-white">Flex item 3</div>
</div>
Tự động mở rộng/thu hẹp với flex-grow, flex-shrink, flex-fill
Trong nhiều tình huống, bạn cần các phần tử trong một flex container chiếm phần không gian linh hoạt, tức là có thể mở rộng để lấp đầy khoảng trống hoặc thu nhỏ lại khi cần thiết. Bootstrap cung cấp sẵn các class tiện ích để bạn kiểm soát khả năng co giãn (flexibility) của từng phần tử một cách đơn giản và trực quan, bao gồm:
flex-fill – Dàn đều phần tử để lấp đầy không gian
Class flex-fill cho phép các phần tử chiếm đều không gian trống còn lại trong container, bất kể nội dung của chúng dài hay ngắn.
<div class="border d-flex">
<div class="m-2 p-2 bg-primary flex-fill">Flex item</div>
<div class="m-2 p-2 bg-warning flex-fill">Flex item</div>
<div class="m-2 p-2 bg-primary flex-fill">Flex item</div>
</div>
Trong đó, tất cả phần tử có sử dụng .flex-fill sẽ cố gắng chiếm đều chiều ngang, kể cả khi nội dung ít hơn. Trong trường hợp có một phần tử chứa nội dung lớn, những phần tử còn lại sẽ tự động điều chỉnh chiều rộng:
<div class="border d-flex">
<div class="m-2 p-2 bg-primary flex-fill">Flex item</div>
<div class="m-2 p-2 bg-warning flex-fill">Flex item chiếm nhiều diện tích</div>
<div class="m-2 p-2 bg-primary flex-fill">Flex item</div>
</div>
Lưu ý: Nếu bạn đã dùng flex-grow-0 hoặc flex-shrink-0, flex-fill có thể không hoạt động đúng như mong muốn, vì nó cần khả năng co/giãn linh hoạt.
flex-grow-* – Mở rộng khi có không gian
Lớp flex-grow-* giúp một phần tử tự động mở rộng để chiếm khoảng trống còn lại, trong khi các phần tử khác giữ nguyên kích thước ban đầu.
Trong đó, sử dụng flex-grow-1 để cho phép phần tử tự động mở rộng và lấp đầy khoảng trống còn lại, trong khi các phần tử khác vẫn giữ kích thước tự nhiên, còn flex-grow-0 để cố định kích thước của một phần tử, không cho nó chiếm thêm không gian dù có dư:
<div class="border d-flex">
<div class="m-2 p-2 bg-primary flex-grow-1">Flex grow 1</div>
<div class="m-2 p-2 bg-primary flex-grow-1">Flex grow 1</div>
<div class="m-2 p-2 bg-warning flex-grow-0">Flex grow 0</div>
</div>
flex-shrink-* – Thu nhỏ lại khi không đủ chỗ
Class flex-shrink-1 cho phép phần tử co lại khi không gian hạn chế, tránh tràn layout, trong khi flex-shrink-0 ngăn phần tử không bị ép thu nhỏ, ví dụ như nút, logo, hoặc avatar.
<div class="border d-flex">
<div class="m-2 p-2 bg-primary flex-shrink-1">Flex shrink 1</div>
<div class="m-2 p-2 bg-primary flex-shrink-1">Flex shrink 1</div>
<div class="m-2 p-2 bg-warning flex-shrink-0">Giữ nguyên kích thước</div>
</div>
Điều khiển xuống dòng với flex-wrap
Mặc định, khi sử dụng Flexbox trong Bootstrap, các phần tử con (flex items) sẽ xếp theo một hàng duy nhất và không tự động xuống dòng. Điều này có thể dẫn đến tình trạng vỡ layout nếu không đủ không gian.
Để giải quyết điều đó, Bootstrap cung cấp nhóm class tiện ích flex-wrap, giúp bạn kiểm soát cách các phần tử xử lý khi không gian bị giới hạn, bao gồm:
.flex-nowrap
Không cho phép xuống dòng (mặc định).
Các phần tử sẽ được hiển thị trên cùng một hàng, bất kể chiều rộng container. Nếu không đủ chỗ, chúng sẽ bị thu nhỏ lại hoặc làm tràn giao diện.
<div class="border d-flex" style="width: 100px;">
<div class="m-2 p-2 bg-primary">Item 1</div>
<div class="m-2 p-2 bg-primary">Item 2</div>
<div class="m-2 p-2 bg-warning">Item 3</div>
</div>
Lưu ý, Dùng .flex-nowrap khi bạn muốn kiểm soát việc co giãn thay vì xuống dòng, thường dùng với scroll hoặc layout có chiều ngang cố định.
.flex-wrap
Tự động xuống dòng.
Nếu container không đủ chiều rộng, các phần tử sẽ tự động xuống hàng, giúp layout không bị vỡ và dễ kiểm soát hơn trên màn hình nhỏ.
<div class="border d-flex flex-wrap" style="width: 200px;">
<div class="m-2 p-2 bg-primary">Item 1</div>
<div class="m-2 p-2 bg-primary">Item 2</div>
<div class="m-2 p-2 bg-warning">Item 3</div>
</div>
.flex-wrap-reverse
Xuống dòng theo thứ tự ngược.
Tương tự như .flex-wrap, nhưng dòng mới sẽ hiển thị phía trên dòng cũ, thay vì phía dưới. Điều này có thể hữu ích khi bạn muốn phần tử mới xuất hiện ở trên trong UI (theo chiều dọc).
<div class="border d-flex flex-wrap-reverse" style="width: 200px;">
<div class="m-2 p-2 bg-primary">Item 1</div>
<div class="m-2 p-2 bg-primary">Item 2</div>
<div class="m-2 p-2 bg-warning">Item 3</div>
</div>
Thay đổi thứ tự phần tử với order-*
Flexbox cho phép bạn thay đổi thứ tự hiển thị của các phần tử mà không cần thay đổi thứ tự trong HTML thông qua các class tiện ích .order-*. Các class order-* có sẵn bao gồm:
| Class | Giá trị CSS | Mô tả |
.order-first | order: -1 | Luôn hiển thị đầu tiên |
.order-0 | order: 0 | Mặc định |
.order-1 → .order-5 | order: 1 → 5 | Hiển thị theo thứ tự tăng dần |
.order-last | order: 6 | Luôn hiển thị cuối cùng |
Ví dụ:
<div class="border d-flex" style="width: 300px;">
<div class="m-2 p-2 bg-primary order-3">Item 1</div>
<div class="m-2 p-2 bg-success order-1">Item 2</div>
<div class="m-2 p-2 bg-warning order-2">Item 3</div>
</div>
Trong đó, mặc dù Item 1 xếp đầu tiên trong mã nguồn, nhưng lại hiển thị ở cuối do có order-3, tương tự với item 2 và Item 3.
Sử dụng align-content-* khi có nhiều dòng
Khi flex container có nhiều hàng (tức là bạn đã bật flex-wrap), bạn có thể dùng các lớp align-content-* để căn chỉnh toàn bộ các hàng theo chiều trục phụ (cross axis). Các class align-content-* có sẵn bao gồm:
| Class | Ý nghĩa |
align-content-start | Căn hàng lên phía đầu trục phụ (trên/cạnh trái) |
align-content-end | Căn xuống cuối trục phụ |
align-content-center | Căn giữa toàn bộ các hàng |
align-content-between | Dàn đều các hàng, không có khoảng trống ngoài |
align-content-around | Dàn đều, có khoảng cách ở ngoài cùng |
align-content-stretch | Kéo giãn các hàng để lấp đầy container (mặc định) |
Ví dụ:
<div class="border d-flex flex-wrap align-content-between" style="width: 300px;">
<div class="p-2 border">Item 1</div>
<div class="p-2 border">Item 2</div>
<div class="p-2 border">Item 3</div>
<div class="p-2 border">Item 4</div>
<div class="p-2 border">Item 5</div>
<div class="p-2 border">Item 6</div>
</div>Trong đó, sử dụng align-content-between để các hàng sẽ được dàn đều theo chiều cao, không có khoảng trống ở trên/dưới:
Flex Responsive trong Bootstrap
Bootstrap hỗ trợ Flexbox responsive thông qua hệ thống breakpoint, cho phép bạn áp dụng các class flex khác nhau tùy theo kích thước màn hình. Đây là công cụ cực kỳ mạnh để xây dựng giao diện thích ứng (responsive) mà không cần viết CSS thủ công.
Class responsive cho hệ thống Flexbox được thiết kế theo cú pháp:
{class-name}-{breakpoint}-{value}Trong đó:
breakpoint: hệ thống các điểm ngắt của Bootstrap như sm (≥576px), md (≥768px), …class-name: tên class tiện ích cần áp dụngvalue: giá trị tương ứng được áp dụng khi màn hình hiển thị có kích thước thỏa mãn với breakpoint.
Ví dụ, để tạo ra giao diện trên mobile (<768px): các phần tử xếp theo cột và căn giữa, còn trên tablet trở lên (≥768px): các phần tử xếp theo hàng ngang và dàn đều hai bên, ta làm như sau:
<div class="border d-flex flex-column flex-md-row justify-content-center justify-content-md-between">
<div class="p-2 bg-primary">Item 1</div>
<div class="p-2 bg-primary">Item 2</div>
<div class="p-2 bg-primary">Item 3</div>
<div class="p-2 bg-primary">Item 4</div>
</div>Kết quả hiển thị trên điện thoại:
Kết quả hiển thị trên máy tính:
So sánh Flexbox và Grid trong Bootstrap
Khi làm việc với Bootstrap, bạn có hai công cụ cực kỳ mạnh để xây dựng bố cục giao diện là Flexbox và Grid. Cả hai đều được tích hợp sẵn thông qua các class tiện ích (utility classes), giúp bạn sắp xếp phần tử dễ dàng hơn rất nhiều so với float, inline-block, hay các phương pháp cũ. Tuy nhiên mỗi công cụ lại phù hợp với một loại bố cục khác nhau.
| Tiêu chí | Flexbox | Grid |
| Mục tiêu thiết kế | Xây dựng bố cục 1 chiều (theo hàng hoặc theo cột) | Xây dựng bố cục 2 chiều (hàng và cột đồng thời) |
| Cách sử dụng | Sử dụng class tiện ích như .d-flex, .justify-content-*, .align-items-* để điều khiển hướng, căn chỉnh và giãn cách phần tử theo hàng hoặc cột. | Sử dụng hệ thống lưới của Bootstrap gồm .container, .row, và các class cột như .col-* để chia layout thành các vùng rõ ràng, có tỷ lệ cụ thể. |
| Độ linh hoạt | Linh hoạt cao trong việc canh chỉnh một nhóm phần tử hoặc từng phần tử | Mạnh trong chia layout tổng thể, chính xác theo lưới |
| Căn chỉnh theo trục | Dễ dàng căn chỉnh theo trục chính và trục phụ | Hỗ trợ căn chỉnh hàng/cột bằng .align-*, nhưng không chi tiết như Flexbox |
| Khả năng tiếp cận | Dễ học đối với người mới | Cần hiểu rõ về hệ thống lưới và tỷ lệ |
| Trường hợp sử dụng | Menu, button group, card group, căn giữa phần tử nhỏ | Giao diện dashboard, blog layout, gallery, form nhiều cột |
Tóm lại, bạn có thể dùng Flexbox khi làm việc với bố cục đơn giản, cần điều khiển chi tiết từng phần tử. Còn trong trường hợp bạn cần chia layout tổng thể, hoặc xử lý bố cục phức tạp nhiều hàng/cột, hãy sử dụng Grid system.
Lỗi sử dụng Flex trong Bootstrap phổ biến và cách khắc phục
Mặc dù Flexbox trong Bootstrap rất tiện lợi và dễ dùng nhờ các class tiện ích có sẵn, nhưng nếu không nắm rõ cách hoạt động hoặc dùng sai ngữ cảnh, bạn có thể gặp phải các lỗi bố cục khó hiểu, đặc biệt là khi giao diện cần responsive hoặc phối hợp với Grid. Dưới đây là một số lỗi thường gặp và cách khắc phục hiệu quả:
Không kích hoạt Flex container trước khi dùng tiện ích Flexbox
Nếu bạn quên thêm .d-flex hoặc .d-inline-flex vào phần tử chứa sẽ dẫn đến việc các class định dạng Flex như justify-content-*, align-items-*, flex-row, v.v. không hoạt động vì phần tử chưa phải là Flex container.
=> Cách khắc phục: Luôn đảm bảo phần tử mẹ được khai báo với .d-flex hoặc .d-inline-flex trước khi áp dụng các tiện ích Flexbox khác.
Áp dụng .d-flex trực tiếp vào .row
Bootstrap đã mặc định .row là một Flex container. Nếu bạn thêm .d-flex vào .row nữa thì có thể gây ra ghi đè hoặc xung đột với hệ thống Grid sẵn có, đặc biệt là làm sai lệch khoảng cách (gutter) giữa các cột.
=> Cách khắc phục: Không thêm .d-flex vào .row. Nếu bạn cần căn chỉnh bằng Flex, hãy áp dụng các class Flexbox vào bên trong phần tử .col.
Thiếu flex-wrap khi cần xuống dòng
Mặc định Flexbox trong Bootstrap sẽ không cho phép các phần tử con tự xuống dòng. Nếu bạn không thêm .flex-wrap, khi số lượng phần tử vượt quá chiều ngang container thì giao diện có thể bị tràn, đặc biệt trên thiết bị nhỏ.
=> Cách khắc phục: Sử dụng thêm class .flex-wrap nếu bạn cần các phần tử tự động xuống dòng để giữ bố cục gọn gàng và tránh tràn nội dung.
Nhầm lẫn giữa trục chính và trục phụ khi thay đổi hướng
Các class như justify-content-* và align-items-* hoạt động dựa trên trục chính và trục phụ của Flex. Khi bạn đổi hướng Flex từ row sang column, vai trò của các trục này sẽ đảo ngược – khiến kết quả căn chỉnh không đúng như mong muốn.
=> Cách khắc phục: Cần xác định rõ flex-direction trước khi sử dụng các class căn chỉnh. Lưu ý rằng justify-content-* áp dụng theo trục chính, còn align-items-* áp dụng theo trục phụ.
Dùng .flex-fill cùng lúc với .flex-grow-0 hoặc .flex-shrink-0
.flex-fill yêu cầu phần tử được co giãn theo không gian còn lại (flex: 1 1 auto). Nếu bạn đồng thời áp dụng .flex-grow-0 hoặc .flex-shrink-0, thì hai class này sẽ mâu thuẫn và khiến phần tử không co giãn đúng cách.
=> Cách khắc phục: Tránh sử dụng .flex-fill cùng với .flex-grow-0 hoặc .flex-shrink-0. Hãy dùng một trong các class mở rộng hoặc thu hẹp, nhưng không kết hợp chúng nếu không thực sự hiểu rõ tác động.
Bài tập luyện tập sử dụng Flexbox Bootstrap
Bài tập 1 (mức độ dễ)
Hãy tạo một khối div có chiều cao là 200px, bên trong có một nút, và dùng Flexbox của Bootstrap để căn giữa nút đó cả theo chiều ngang lẫn chiều dọc.
Lời giải Bài tập 1
<div class="m-5 p-5" style="width: 500px;">
<div class="d-flex justify-content-center align-items-center bg-light border" style="height: 200px;">
<button class="btn btn-primary">Click me</button>
</div>
</div>Giải thích:
- Dùng
d-flexđể kích hoạt Flexbox - Dùng
justify-content-centerđể căn giữa theo trục ngang - Dùng
align-items-centerđể căn giữa theo trục dọc - Dùng
style="height: 200px;"để tạo khung có chiều cao cố định
Bài tập 2 (mức độ trung bình)
Tạo một thanh menu ngang gồm 4 mục: Trang chủ, Giới thiệu, Dịch vụ, Liên hệ. Dùng Flexbox để sắp xếp đều các mục này trên 1 dòng, sao cho:
- Khi ở màn hình desktop: Các mục dàn đều theo hàng ngang
- Khi ở màn hình điện thoại: Các mục căn giữa theo chiều dọc
Lời giải Bài tập 2
<div class="d-flex flex-column flex-md-row justify-content-md-between align-items-center bg-light p-3">
<a href="#" class="text-decoration-none mb-2 mb-md-0">Home</a>
<a href="#" class="text-decoration-none mb-2 mb-md-0">About</a>
<a href="#" class="text-decoration-none mb-2 mb-md-0">Services</a>
<a href="#" class="text-decoration-none">Contact</a>
</div>Giải thích:
- Dùng
d-flex flex-column flex-md-rowđể chuyển từ dọc → ngang theo breakpoint. - Dùng
align-items-centerđể căn giữa theo chiều ngang khi ở mobile. - Dùng
justify-content-md-betweenđể dàn đều ở desktop.
Bài tập 3 (mức độ khó)
Tạo một khối hiển thị thông tin sản phẩm với bố cục như sau:
- Bên trái: ảnh sản phẩm
- Bên phải: tên sản phẩm, mô tả, giá và nút “Thêm vào giỏ”
Responsive:
- Ở desktop: ảnh và nội dung nằm ngang (2 cột)
- Ở mobile: ảnh nằm trên, nội dung nằm dưới (dọc)
Lời giải Bài tập 3
<div class="d-flex flex-column flex-md-row border p-3 gap-3 bg-light">
<!-- Hình ảnh sản phẩm -->
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKk8Nc-lBHyDwEMs0drgzArhbsx4Ihq-_DIA&s" alt="Sản phẩm" class="img-fluid" style="max-width: 150px;">
<!-- Nội dung mô tả -->
<div class="flex-grow-1 text-center text-md-start">
<h5>Tên sản phẩm</h5>
<p>Mô tả ngắn về sản phẩm này. Đây là phần mô tả nội dung, thông tin chi tiết.</p>
<p class="fw-bold text-success">Giá: 250.000đ</p>
<button class="btn btn-primary">Thêm vào giỏ</button>
</div>
</div>Giải thích:
- Dùng
d-flex flex-column flex-md-rowđể chuyển từ dọc → ngang theo breakpoint (breakpoint md sẽ kích hoạt khi ở màn hình tablet trở lên) - Dùng
gap-3để tạo khoảng cách giữa ảnh và nội dung flex-grow-1giúp nội dung mở rộng chiếm đều không gian còn lại- Dùng
text-center text-md-startđể canh chữ đẹp theo từng thiết bị
Câu hỏi thường gặp về Flexbox Bootstrap
Làm sao để căn giữa phần tử theo cả chiều ngang và dọc?
Để căn giữa phần tử theo cả chiều ngang và dọc, bạn có thể sử dụng Flexbox trong Bootstrap bằng cách:
- Biến phần tử cha thành Flex container với
.d-flex - Dùng thêm
.justify-content-center(căn ngang) và.align-items-center(căn dọc) - Đảm bảo phần tử cha có chiều cao cụ thể để việc căn dọc hoạt động
Ví dụ:
<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
<button class="btn btn-primary">phần tử canh giữa</button>
</div>Vì sao justify-content-center không hoạt động?
Nguyên nhân phổ biến là bạn quên thêm .d-flex để kích hoạt chế độ Flex cho phần tử hoặc đang dùng trong thành phần không phải Flex container (như .row, .container). Ví dụ về việc sử dụng đúng justify-content-center:
<div class="d-flex justify-content-center">
<span>phần tử căn giữa</span>
</div>Tôi có thể kết hợp Flexbox và Grid trong Bootstrap không?
Bạn hoàn toàn có thể kết hợp Flexbox và Grid trong Bootstrap. Grid dùng để chia bố cục tổng thể bằng .row và .col-*, còn Flexbox dùng để căn chỉnh chi tiết bên trong từng phần tử như .col. Tuy nhiên, lưu ý không nên áp .d-flex vào .row, vì .row đã là Flex container sẵn mà hãy dùng Flexbox bên trong .col để tránh xung đột layout.
Tổng kết
Flexbox trong Bootstrap là một công cụ linh hoạt giúp lập trình viên dễ dàng sắp xếp, căn chỉnh và quản lý bố cục mà không cần viết nhiều CSS phức tạp. Với hệ thống class tiện ích mạnh mẽ, Flexbox phù hợp với mọi loại dự án – từ giao diện đơn giản đến layout phức tạp, responsive. Qua bài viết này, ITviec hi vọng bạn đã hiểu rõ cách sử dụng Flexbox trong Bootstrap để xây dựng giao diện web hiện đại, gọn gàng và dễ bảo trì.
