Tạo Flexbox
Xem trước thời gian thực
Tại sao dùng công cụ tạo Flexbox trực quan?
CSS Flexbox có nhiều thuộc tính tương tác với nhau và các kết hợp có thể phức tạp. Với công cụ trực quan của chúng tôi, bạn có thể điều chỉnh từng thuộc tính qua menu thả xuống và thấy layout cập nhật theo thời gian thực.
Xem trước thời gian thực
Thấy chính xác layout Flexbox làm gì ở mỗi thay đổi thuộc tính — không cần đoán
Đầy đủ thuộc tính
flex-direction, justify-content, align-items, flex-wrap và gap trong một giao diện
CSS sẵn sàng sử dụng
Sao chép khối .container {} CSS gọn gàng trực tiếp vào stylesheet của bạn
Tạo layout Flexbox
Đặt hướng và wrapping
Chọn flex-direction (hàng/cột) và flex-wrap để kiểm soát trục chính và tràn
Điều chỉnh căn chỉnh phần tử
Điều chỉnh justify-content và align-items để kiểm soát phân bố và căn chỉnh phần tử
Sao chép CSS
Nhấp 'Sao chép CSS' để lấy khối .container CSS đầy đủ sẵn sàng cho dự án của bạn
Các trường hợp sử dụng Flexbox
Thanh điều hướng
Flexbox lý tưởng cho thanh nav ngang với justifyContent:space-between cho logo+links
Lưới card
Tạo lưới card responsive với flex-wrap:wrap và flex-basis cố định
Căn giữa hoàn hảo
justifyContent:center + alignItems:center — cách đơn giản nhất để căn giữa bất kỳ phần tử nào
Layout biểu mẫu
Căn chỉnh nhãn và trường biểu mẫu theo chiều ngang hoặc dọc cho biểu mẫu gọn gàng với Flexbox
Các thực hành tốt nhất cho Flexbox
✓ Hiểu trục chính và trục chéo
justify-content kiểm soát trục chính (hàng=ngang). align-items kiểm soát trục chéo. Thay đổi khi dùng flex-direction:column.
✓ Dùng flex:1 cho phần tử có thể mở rộng
Thêm flex:1 vào phần tử flex để mở rộng chiếm không gian có sẵn.
✓ Dùng gap thay vì margin
Thuộc tính gap tạo khoảng cách đều giữa các phần tử flex mà không thêm margin ở các cạnh ngoài.
✓ Dùng Grid cho layout 2D
Flexbox kiểm soát một trục mỗi lần. Dùng CSS Grid cho layout hai chiều.
❓ Câu hỏi thường gặp
Khi nào dùng Flexbox thay vì CSS Grid?
Flexbox lý tưởng cho layout một chiều (thanh nav, nhóm nút, hàng biểu mẫu). CSS Grid xuất sắc trong layout hai chiều khi bạn kiểm soát cả hàng và cột đồng thời.
flex-wrap:wrap là gì?
Mặc định, phần tử flex bị ép vào một hàng dù tràn. flex-wrap:wrap cho phép phần tử xuống hàng mới khi tràn — quan trọng cho layout responsive.
Sự khác biệt giữa align-items và align-content là gì?
align-items căn chỉnh phần tử flex trên một hàng duy nhất. align-content chỉ áp dụng khi có nhiều hàng (flex-wrap:wrap) và kiểm soát phân bố hàng trong container.
Làm thế nào để tạo cột có chiều rộng bằng nhau với Flexbox?
Áp dụng flex:1 cho mỗi phần tử. Mở rộng chúng chiếm không gian có sẵn đều nhau. Dùng flex:0 0 33,33% cho đúng 3 cột bằng nhau bất kể nội dung.