Một trong những bước ngoặt quan trọng trong thiết kế giao diện web hiện đại là Flexbox. Nó giúp bạn sắp xếp các phần tử theo hàng ngang hoặc dọc, căn giữa dễ dàng, chia đều khoảng cách, và hơn thế nữa.
Nếu trong CSS thuần, bạn cần viết một loạt thuộc tính như display: flex, justify-content, align-items… thì với Tailwind, bạn chỉ cần gán các class ngắn gọn ngay trong HTML, không cần viết CSS riêng.
Bài học liên quan flexbox trong môn học lập trình CSS:
Trong bài học này, chúng ta sẽ cùng nhau khám phá cách sử dụng Flexbox bằng Tailwind CSS để:
- Canh giữa các phần tử
- Chia layout theo chiều ngang hoặc dọc
- Sắp xếp nội dung linh hoạt trên mọi thiết bị
Flex là gì? Nhắc lại một chút lý thuyết
Flexbox (Flexible Box Layout) là một mô hình bố cục trong CSS giúp bạn:
- Dễ dàng căn chỉnh phần tử con trong một khối cha
- Linh hoạt về chiều ngang (row) và chiều dọc (column)
- Giải quyết nhiều vấn đề mà float hay inline-block từng gặp phải
Các class Flexbox trong Tailwind
| Class | Tác dụng |
|---|---|
flex | Kích hoạt chế độ flex cho phần tử cha |
flex-row | Xếp con theo hàng ngang (mặc định) |
flex-col | Xếp con theo cột dọc |
items-center | Căn giữa theo chiều dọc |
justify-center | Căn giữa theo chiều ngang |
justify-between | Dàn đều các phần tử |
gap-x-*, gap-y-* | Khoảng cách giữa các cột/hàng |
flex-wrap | Cho phép xuống dòng khi tràn |
Ví dụ 1: Căn giữa nội dung
<div class="flex items-center justify-center h-screen bg-gray-100">
<div class="bg-white p-8 rounded shadow text-center">
<h2 class="text-2xl font-bold text-gray-800">Chào bạn!</h2>
<p class="text-gray-600 mt-2">Nội dung này được căn giữa bằng Flexbox.</p>
</div>
</div>
flex: kích hoạt flexitems-center: căn giữa theo chiều dọcjustify-center: căn giữa theo chiều ngangh-screen: chiều cao = 100% chiều cao màn hình
Ví dụ 2: Chia bố cục theo hàng ngang
<div class="flex space-x-4 p-4 bg-gray-200">
<div class="bg-white p-4 rounded shadow flex-1">Cột 1</div>
<div class="bg-white p-4 rounded shadow flex-1">Cột 2</div>
<div class="bg-white p-4 rounded shadow flex-1">Cột 3</div>
</div>
Ở đây:
flex: kích hoạt flex theo hàngspace-x-4: tạo khoảng cách ngang giữa các cộtflex-1: chia đều chiều rộng các phần tử con
Ví dụ 3: Flex column trên mobile, row trên desktop
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-1 bg-blue-100 p-4">Nội dung trái</div>
<div class="flex-1 bg-blue-200 p-4">Nội dung phải</div>
</div>
Giải thích:
- Mobile:
flex-col→ xếp dọc - Desktop:
md:flex-row→ xếp ngang
Rất phù hợp khi bạn muốn layout responsive mà không cần viết media query.
So sánh với CSS thuần
| Ý tưởng thiết kế | CSS truyền thống | Tailwind CSS |
|---|---|---|
| Bật flex | display: flex; | flex |
| Xếp dọc | flex-direction: column; | flex-col |
| Căn giữa chiều ngang | justify-content: center; | justify-center |
| Căn giữa chiều dọc | align-items: center; | items-center |
| Khoảng cách giữa các khối | margin-right, margin-left, gap | space-x-*, gap-x-* |
| Tự co giãn phần tử | flex: 1; | flex-1 |
Tương tác thực hành
Hãy thử viết một card gồm 2 phần:
- Bên trái là hình ảnh (hoặc placeholder)
- Bên phải là tiêu đề và đoạn mô tả
Trên mobile: xếp dọc
Trên desktop: xếp ngang
<div class="flex flex-col md:flex-row items-center bg-white shadow rounded p-4 max-w-4xl mx-auto">
<img src="https://via.placeholder.com/200x150" class="rounded mb-4 md:mb-0 md:mr-6" />
<div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Giới thiệu khóa học</h3>
<p class="text-gray-600">Khóa học này giúp bạn thành thạo Tailwind CSS với ví dụ thực tế, rõ ràng và dễ học.</p>
</div>
</div>
Tổng kết kiến thức
| Class | Chức năng |
|---|---|
flex | Kích hoạt Flexbox |
flex-row | Sắp xếp hàng ngang (mặc định) |
flex-col | Sắp xếp theo cột dọc |
justify-center | Căn giữa theo chiều ngang |
items-center | Căn giữa theo chiều dọc |
space-x-4 | Khoảng cách ngang giữa các phần tử con |
flex-1 | Chia đều không gian |
md:flex-row | Responsive: đổi hướng khi màn hình đủ lớn |
Tóm tắt bài học
- Tailwind giúp bạn sử dụng Flexbox nhanh chóng với các class tiện ích ngắn gọn.
- Bạn có thể dễ dàng chia bố cục hàng/cột, canh giữa, chia đều phần tử, và phản hồi responsive mà không cần viết CSS tay.
- Flex là công cụ cực kỳ quan trọng trong việc xây dựng layout linh hoạt.
Flex giúp bạn sắp xếp nội dung một cách linh hoạt theo dòng và cột, nhưng nếu bạn muốn chia layout thành lưới nhiều hàng – nhiều cột một cách chính xác hơn (ví dụ như bảng sản phẩm, gallery ảnh…), thì Grid layout sẽ là lựa chọn hoàn hảo.
Trong bài 12, chúng ta sẽ học cách sử dụng Grid layout trong Tailwind CSS – vừa đơn giản, vừa mạnh mẽ.
Bạn đã quen với chiều ngang, chiều dọc, căn giữa và chia cột linh hoạt. Giờ là lúc mở rộng sang bố cục dạng lưới — hẹn gặp bạn ở bài 12: Sử dụng Grid layout trong Tailwind CSS.
Thảo luận