💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!

Cập nhật: 31 tháng 5 năm 2026

Dàn hàng bằng Flexbox | Hướng dẫn và bài tập

📌

Kết luận

Dùng display: flex để xếp các phần tử con nằm ngang

Flexbox là nền tảng của bố cục CSS hiện đại.

📝 Mã thực tế tại đây

.container { display: flex; }

Chỉ với một dòng này, các phần tử con sẽ tự động dàn hàng ngang.

Các thuộc tính chính

Thuộc tính	Hiệu quả
`justify-content`	Căn chỉnh theo trục chính (ngang)
`align-items`	Căn chỉnh theo trục phụ (dọc)
`gap`	Khoảng cách giữa các phần tử con
`flex-direction`	Hướng sắp xếp (hàng hoặc cột)

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

Mục đích	Flexbox hay Grid
Thanh menu nằm ngang	Flexbox ✅
Căn trái phải cho Header	Flexbox ✅
Danh sách thẻ chia cột	Grid ✅
Bảng điều khiển (Dashboard)	Grid ✅

Dùng Flexbox cho bố cục 1 chiều (ngang HOẶC dọc), và dùng Grid cho bố cục 2 chiều (cả hàng VÀ cột).

Tổng kết

- display: flex xếp các phần tử con nằm ngang - Dùng justify-content và align-items để điều khiển vị trí - Là lựa chọn hàng đầu cho bố cục 1 chiều

Hãy thử trong phần bài tập

Hãy xếp 3 thẻ div nằm ngang bằng Flexbox nhé.

🧪 Thử nghiệm tại đây

Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.

Thử ngay

■ Bài tập thực hành

Hãy xếp 3 thẻ div nằm ngang bằng Flexbox.

Gợi ý khi gặp khó khăn

Thêm display: flex cho phần tử cha.

15pt

Dàn hàng bằng Flexbox

Hãy xếp 3 thẻ div nằm ngang bằng Flexbox.

Mã nguồn

<div class="container"><div>A</div><div>B</div><div>C</div></div>

Xem trước

Lỗi & Console

Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.

Lộ trình học · Toàn bộ bài giảng

Đi sâu bài tập này

"Dàn hàng bằng Flexbox" là bài HTML/CSS/JS mức 初級. Hãy xếp 3 thẻ div nằm ngang bằng Flexbox. Chạy ngay trên trình duyệt với kiểm tra tự động.

Flexbox giúp việc sắp xếp các phần tử con theo một chiều (ngang hoặc dọc) trở nên dễ dàng. Mẫu tương tự xuất hiện trong review code và UI thực tế.

Kết hợp với lộ trình layout. Bài #36 củng cố kỹ năng css-layout.

Quy trình từng bước

Đọc bài giải thích và nắm mục tiêu "Dàn hàng bằng Flexbox"
Kiểm tra cột HTML/CSS/JS và bắt đầu từ mã mẫu
Mở gợi ý nếu bí, so sánh với lời giải
Bấm Chạy để xem preview/console
Hệ thống kiểm tra có chứa: display, flex.
Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải

Mã giải dùng thẻ: div, style. Kiểm tra thẻ đóng và lồng nhau. CSS dùng: display. Chú ý selector và chính tả. Giải thích: Flexbox giúp việc sắp xếp các phần tử con theo một chiều (ngang hoặc dọc) trở nên dễ dàng. Gợi ý: Thêm display: flex cho phần tử cha.

Ứng dụng thực tế & nghề nghiệp

Flexbox/Grid là chuẩn cho dashboard, card UI, nav responsive—yêu cầu CSS hiện đại trên JD.

Lỗi thường gặp

Bỏ qua gợi ý: Thêm display: flex cho phần tử cha.
Quên display:flex trên phần tử cha
Quên display:flex trên phần tử cha
Nhầm justify-content và align-items
Chỉ dùng px cố định, không responsive

Xử lý sự cố

Preview không đổi sau khi chạy: Kiểm tra bạn sửa đúng cột HTML/CSS/JS và đã bấm Chạy.
Đúng nhưng không pass: Hệ thống kiểm tra có chứa: display, flex. Kiểm tra typo và thẻ đóng.
Lỗi trên console: Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại: Dùng màn ngang hoặc mở cùng URL trên PC.

Mẹo phỏng vấn & portfolio

Giải thích kỹ thuật trong "Dàn hàng bằng Flexbox" bằng lời của bạn trong 30 giây
Luyện mô tả từng dòng mã giải trên bảng trắng
Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

Thuật ngữ

Flexbox: Bố cục một chiều hàng/cột.
Grid: Bố cục hai chiều hàng và cột.
gap: Khoảng cách giữa item flex/grid.

Từ khóa trên trang này

Trang này là bài tập miễn phí về Dàn hàng bằng Flexbox cho từ khóa: Dàn hàng bằng Flexbox, css-layout, 初級, div, style, display, flexbox row.

Công cụ liên quan

Lộ trình học

Lộ trình học →

Bài tập liên quan

Câu hỏi thường gặp (FAQ)

Dàn hàng bằng Flexbox có miễn phí không?

Bài tập này hoàn toàn miễn phí và chạy ngay trên trình duyệt. Không cần đăng ký hay thẻ tín dụng.

Độ khó và thời gian?

"Dàn hàng bằng Flexbox" ở mức "初級". Đọc hướng dẫn trước; người mới thường hoàn thành trong 30 phút. Mỗi bài khoảng 5–15 phút. Dùng gợi ý, sau đó xem lời giải nếu bí.

Sau khi đúng làm gì?

Sau khi đúng, dùng liên kết bài tiếp theo. Hoàn thành danh mục rồi sang lộ trình học.

Làm trên điện thoại được không?

Chạy trên trình duyệt di động, nhưng gõ mã trên máy tính tiện hơn.

Bài tập khác ở đâu?

Danh sách bài tập: /vi/learn/ có bộ lọc danh mục.

Điểm cần nhớ trong "Dàn hàng bằng Flexbox"?

Flexbox giúp việc sắp xếp các phần tử con theo một chiều (ngang hoặc dọc) trở nên dễ dàng. Gợi ý: Thêm display: flex cho phần tử cha.

Vị trí danh mục css-layout?

Flexbox/Grid là chuẩn cho dashboard, card UI, nav responsive—yêu cầu CSS hiện đại trên JD.

Các bước cụ thể cho "Dàn hàng bằng Flexbox"?

1. Đọc bài giải thích và nắm mục tiêu "Dàn hàng bằng Flexbox"
2. Kiểm tra cột HTML/CSS/JS và bắt đầu từ mã mẫu
3. Mở gợi ý nếu bí, so sánh với lời giải
4. Bấm Chạy để xem preview/console
5. Hệ thống kiểm tra có chứa: display, flex.
6. Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải?

Mã giải dùng thẻ: div, style. Kiểm tra thẻ đóng và lồng nhau.

CSS dùng: display. Chú ý selector và chính tả.

Giải thích: Flexbox giúp việc sắp xếp các phần tử con theo một chiều (ngang hoặc dọc) trở nên dễ dàng.

Gợi ý: Thêm display: flex cho phần tử cha.

Khi gặp sự cố?

Preview không đổi sau khi chạy → Kiểm tra bạn sửa đúng cột HTML/CSS/JS và đã bấm Chạy.
Đúng nhưng không pass → Hệ thống kiểm tra có chứa: display, flex. Kiểm tra typo và thẻ đóng.
Lỗi trên console → Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại → Dùng màn ngang hoặc mở cùng URL trên PC.

Liên quan nghề nghiệp?

Giải thích kỹ thuật trong "Dàn hàng bằng Flexbox" bằng lời của bạn trong 30 giây Luyện mô tả từng dòng mã giải trên bảng trắng Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

Công cụ liên quan?

CSS Grid, Tỷ lệ khung hình

Kiến thức nền?

Đọc Lộ trình học trước.

ツール一覧