Flexbox là gì?
Flexbox (tên đầy đủ: Flexible Box Layout) là một kiểu bố cục trong CSS, cho phép sắp xếp các phần tử bên trong một khung tự co giãn, căn chỉnh và phân bổ đều theo chiều ngang hoặc chiều dọc mà không cần tính toán pixel thủ công.
Trước khi có Flexbox, để căn giữa một hộp trong một khung, người ta phải viết 4-5 dòng CSS lằng nhằng và kết quả vẫn hay lệch trên các màn hình khác nhau. Với Flexbox, chỉ cần 2 dòng. Đây là lý do gần như mọi dự án web hiện đại đều có Flexbox ở đâu đó trong code.
Nếu bạn muốn hiểu rõ hơn về cách trình duyệt hiểu “kích thước màn hình” để biết khi nào co, khi nào giãn, bài viewport là gì giải thích nền tảng đó.
Flexbox dùng để làm gì trong việc làm web?
Mỗi khi bạn thấy thanh điều hướng nằm ngang với logo bên trái, menu ở giữa và nút “Liên hệ” bên phải, đó gần như chắc chắn là Flexbox đang làm việc phía sau.
Thanh điều hướng: logo và các mục menu xếp trên một hàng, tự điều chỉnh khi thu nhỏ màn hình điện thoại.
Hàng card sản phẩm: ảnh, tên, giá và nút “Mua ngay” bên trong mỗi card xếp thành cột dọc đều nhau.
Footer nhiều cột: thông tin liên hệ, danh sách trang và mạng xã hội chia đều theo hàng ngang.
Biểu mẫu (form): nhãn và ô nhập liệu căn thẳng hàng, nút gửi nằm đúng chỗ.
Điểm chung: Flexbox giỏi nhất khi bạn cần sắp xếp theo một chiều, hoặc một hàng ngang, hoặc một cột dọc.
Flexbox khác CSS Grid ở chỗ nào?
Đây là câu hỏi nhiều người nhầm nhất khi bắt đầu tìm hiểu về CSS. Hai công cụ này không thay thế nhau mà bổ sung cho nhau.
| Tiêu chí | Flexbox | CSS Grid |
|---|---|---|
| Chiều sắp xếp | Một chiều (ngang hoặc dọc) | Hai chiều (hàng lẫn cột cùng lúc) |
| Phù hợp với | Thanh nav, card, icon row, form | Layout toàn trang, magazine, dashboard |
| Kiểm soát item | Item tự quyết kích thước linh hoạt | Ô lưới định sẵn, item đặt vào ô |
| Dùng khi | Cần co giãn, phân bổ đều theo 1 chiều | Cần kiểm soát chính xác vị trí 2 chiều |
Trong thực tế, hầu hết dự án web dùng cả hai: Flexbox lo phần căn chỉnh bên trong từng khối nhỏ, CSS Grid lo phần chia layout tổng thể. Bài CSS Grid là gì đi sâu vào phần bố cục hai chiều mà Flexbox không làm được.
Flexbox hoạt động như thế nào?
Khi bạn khai báo display: flex cho một khung (container), tất cả phần tử bên trong tự động xếp theo một trục chính (main axis), mặc định là chiều ngang từ trái sang phải.
Bốn thuộc tính bạn sẽ dùng nhiều nhất:
flex-direction: chọn chiều xếp (ngang hay dọc). Đổi thành column là tất cả item xếp thành một cột dọc.
justify-content: căn chỉnh theo chiều chính. Giá trị center dồn tất cả vào giữa, space-between đẩy item ra hai đầu, phần còn lại chia đều.
align-items: căn chỉnh theo chiều phụ. center căn giữa theo chiều cao của container.
flex-wrap: cho phép items xuống hàng khi không đủ chỗ, thay vì bị thu nhỏ hoặc tràn ra ngoài.
Hình dung cụ thể: bạn đang xếp sách lên một kệ ngang. justify-content quyết định dồn tất cả về bên trái hay chia đều. align-items quyết định sách cao thấp khác nhau sẽ căn theo cạnh trên hay giữa kệ. Khi kệ không đủ chỗ, flex-wrap cho phép quyển sách “rớt” xuống hàng kệ bên dưới tự nhiên.
Phần chuyển đổi bố cục khi màn hình thu nhỏ phối hợp chặt với media query và breakpoint.
Người không rành kỹ thuật cần quan tâm Flexbox ở mức nào?
Nếu bạn là chủ doanh nghiệp hoặc quản lý nội dung, bạn không cần nhớ cú pháp Flexbox. Nhưng có một điều đáng biết: khi bạn yêu cầu “căn giữa logo”, “chia đều 4 cột”, hay “menu nằm ngang trên máy tính, xuống dọc trên điện thoại”, thực ra bạn đang đặt hàng cho Flexbox.
Hiểu điều này giúp bạn giao việc rõ hơn cho dev hoặc đơn vị làm web. Thay vì nói “cho đẹp hơn”, bạn có thể nói “căn giữa icon đó” hay “4 logo đối tác xếp thành một hàng” và dev hiểu ngay, không mất thêm vòng hỏi lại.
(Phần lớn yêu cầu bố cục mà khách hay mô tả chung chung đều có thể diễn đạt bằng 2-3 từ kỹ thuật, tiết kiệm thời gian cho cả hai bên.)
Nếu bạn đang tìm đơn vị thiết kế website tự co giãn đẹp trên mọi thiết bị, dịch vụ thiết kế website responsive của Web22 có thể là nơi phù hợp để bắt đầu.
Câu hỏi thường gặp về Flexbox
Flexbox có cần cài đặt gì thêm không?
Không. Flexbox là tính năng gốc của CSS, mọi trình duyệt hiện đại đều đọc được từ năm 2015 trở lại, không cần thư viện hay plugin nào thêm.
Flexbox có thay thế được CSS Grid không?
Không hoàn toàn. Flexbox giỏi sắp xếp theo một chiều, CSS Grid giỏi kiểm soát bố cục hai chiều (hàng lẫn cột cùng lúc). Hai công cụ này bổ sung nhau chứ không thay thế nhau — dùng cùng nhau trong một dự án là cách làm phổ biến.
Học Flexbox mất bao lâu?
Phần căn bản (display: flex, justify-content, align-items) nắm được trong một buổi. Phần nâng cao như flex-grow, flex-shrink, order cần thêm vài ngày thực hành.
Khi nào nên dùng Flexbox thay vì CSS Grid?
Khi bạn chỉ cần sắp xếp theo một chiều. Khi cần kiểm soát cả hàng lẫn cột cùng lúc thì CSS Grid phù hợp hơn.