Cách dùng Trình tạo CSS Flexbox
- Chọn một mẫu — căn giữa, thanh điều hướng, lưới thẻ tự xuống dòng, sidebar, xếp chồng — hoặc bắt đầu từ đầu.
- Thiết lập container: flex-direction, flex-wrap, justify-content (trục chính), align-items (trục phụ) và gap.
- Nhấp vào một phần tử để chỉnh flex-grow, shrink, basis, order và align-self; dùng + Add item hoặc Remove để thay đổi số lượng phần tử.
- Thay đổi kích thước container để kiểm tra, rồi sao chép CSS, HTML hoặc các class Tailwind.
Hai trục của flexbox
Flexbox sắp xếp các phần tử theo một trục chính (do flex-direction quyết định) và một trục phụ vuông góc với nó. justify-content phân bố phần tử dọc theo trục chính; align-items căn chỉnh chúng trên trục phụ. Khi chuyển sang column, hai trục sẽ đổi chỗ cho nhau — đó là lý do “căn giữa theo chiều dọc” đôi khi cần justify-content, đôi khi lại cần align-items.
flex: grow shrink basis
| Cách viết | Tương đương | Dùng khi |
|---|---|---|
flex: 1 | 1 1 0% | Các cột có chiều rộng bằng nhau, chia đều không gian |
flex: auto | 1 1 auto | Giãn theo kích thước nội dung của chính nó |
flex: none | 0 0 auto | Phần tử cố định như logo hoặc icon |
flex: 1 1 240px | Bắt đầu từ 240px, sau đó co giãn | Lưới thẻ tự xuống dòng |
margin-left: auto trên một phần tử sẽ đẩy nó — và mọi phần tử sau nó — về sát cuối, là cách kinh điển để đưa nút “Đăng nhập” sang phải trong thanh điều hướng. Với bố cục hai chiều có cả hàng và cột, Trình tạo CSS Grid phù hợp hơn.
Cũng được tìm dưới tên: công cụ tạo flexbox, css flexbox generator, thử flexbox online, flexbox builder, căn giữa div flexbox, justify-content align-items, tailwind flex generator, ví dụ css flex.
Các công cụ dùng kèm tốt với Trình tạo CSS Flexbox
- Trình tạo Border Radius — Bo tròn các góc của bất kỳ khung nào: kéo một thanh trượt cho tất cả các góc hoặc đặt từng góc riêng, chuyển sang góc elliptical để tạo hình blob và lá, rồi sao chép đoạn CSS border-radius ngắn gọn và hợp lệ nhất.
- Tạo Box Shadow CSS — Xếp nhiều lớp bóng đổ, chỉnh độ lệch, blur, spread và độ trong suốt trên thẻ xem trước trực tiếp, rồi sao chép CSS box-shadow hoặc text-shadow.
- Chuyển CSS sang Tailwind — Dán các quy tắc hoặc khai báo CSS và nhận ngay danh sách class Tailwind tương ứng cho từng selector, bao gồm trạng thái hover: và giá trị tùy chỉnh như p-[13px].
- Máy tính CSS clamp() — Nhập kích thước tối thiểu, tối đa và dải chiều rộng viewport — bạn sẽ nhận được giá trị clamp() thân thiện với phóng to, kèm giải thích công thức, xem trước trực tiếp và thang chữ hoặc thang khoảng cách linh hoạt hoàn chỉnh.
Câu hỏi thường gặp
Làm sao để căn giữa một div bằng flexbox?
Áp dụng cho phần tử cha: display: flex; justify-content: center; align-items: center; và đặt một chiều cao cho nó. Chọn mẫu “Căn giữa mọi thứ” để xem trực tiếp.
Sự khác nhau giữa justify-content và align-items là gì?
justify-content căn vị trí phần tử theo trục chính (ngang khi dùng row), còn align-items căn theo trục phụ (dọc khi dùng row). Với flex-direction: column, hai thuộc tính này sẽ đổi chỗ cho nhau.
Vì sao các phần tử flex của tôi không xuống dòng?
flex-wrap mặc định là nowrap, nên các phần tử sẽ co lại để vừa một dòng. Hãy đặt flex-wrap: wrap và gán flex-basis hoặc min-width cho phần tử để chúng có kích thước làm điểm ngắt dòng.
Nên dùng flexbox hay grid?
Flexbox phù hợp khi bố cục chỉ theo một hướng — thanh điều hướng, thanh công cụ, căn giữa, hàng thẻ. Grid phù hợp khi cần các hàng và cột thẳng hàng, như bố cục trang hay dashboard.
Tôi có thể cài Trình tạo CSS Flexbox như một ứng dụng web và dùng khi không có mạng không?
Có. Trình tạo CSS Flexbox là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.