Xem trước
1
2
3
4
5
Flexbox Generator giúp bạn học và tạo CSS Flexbox layout trực quan. Chọn các thuộc tính flex container và thấy ngay kết quả, rồi copy CSS để dùng trong dự án.
Học Flexbox dễ hơn
Xem ngay hiệu ứng của từng thuộc tính flex giúp hiểu sâu hơn là đọc docs.
Layout nhanh hơn
Tìm combination justify/align phù hợp mà không cần thử trong code.
Copy CSS ngay
Một click để copy toàn bộ flexbox CSS cho container.
Preview real-time
Thấy ngay ảnh hưởng của flex-direction, wrap, gap lên các items.
01
Chọn flex-direction
Row (ngang) hoặc Column (dọc) — hướng chính của flex container.
02
Chọn justify-content
Căn chỉnh items theo trục chính (main axis).
03
Chọn align-items
Căn chỉnh items theo trục phụ (cross axis).
04
Chỉnh gap & wrap
Khoảng cách giữa items và cho phép items xuống hàng mới.
flex-direction
row | row-reverse | column | column-reverse — hướng sắp xếp của flex items.
justify-content
flex-start | flex-end | center | space-between | space-around | space-evenly
align-items
flex-start | flex-end | center | stretch | baseline
flex-wrap
nowrap | wrap | wrap-reverse — cho phép items xuống hàng hay không.
gap
Khoảng cách đồng đều giữa tất cả flex items, thay thế cho margin.
Developer mới
Học Flexbox một cách trực quan thay vì chỉ đọc documentation.
Senior Developer
Nhanh chóng prototype layout mà không cần mở IDE.
Designer
Hiểu cách Flexbox hoạt động để giao tiếp với developer chính xác hơn.