CSS Flexbox Playground
Thử nghiệm với các thuộc tính container và item của Flexbox trong một playground trực quan trực tiếp. Điều chỉnh hướng, căn chỉnh, xuống dòng và các giá trị flex cho từng item.
미리보기에서 아이템을 클릭하면 속성을 편집할 수 있습니다.
Flexbox Playground Là Gì?
Flexbox playground là một công cụ tương tác cho phép bạn thử nghiệm trực quan với các thuộc tính bố cục CSS Flexbox. Bạn thay đổi các cài đặt container như hướng, căn chỉnh và điều chỉnh, đồng thời thấy ngay các flex item được sắp xếp lại như thế nào. Nó giúp các nhà phát triển học Flexbox hoặc nhanh chóng tạo mẫu bố cục mà không cần viết CSS từ đầu.
Cách Sử Dụng Flexbox Playground
- Thiết lập thuộc tính container — Chọn flex-direction, justify-content, align-items, wrap và gap
- Thêm/xóa item — Sử dụng các nút để thêm hoặc xóa các flex item (từ 3 đến 10)
- Chỉnh sửa thuộc tính item — Nhấp vào bất kỳ item nào để đặt flex-grow, shrink, basis, order và align-self của nó
- Xem trước — Xem bố cục cập nhật trong thời gian thực
- Sao chép CSS — Nhấp vào sao chép để lấy CSS đã tạo cho cả container và các item
Tại Sao Nên Sử Dụng Flexbox Playground Này?
- Học Tập Trực Quan — Hiểu Flexbox bằng cách xem các thay đổi ngay lập tức
- Kiểm Soát Từng Item — Đặt flex-grow, shrink, basis, order và align-self riêng cho từng item
- Xuất CSS Sạch Sẽ — Nhận CSS được định dạng tốt mà bạn có thể dán trực tiếp vào dự án của mình
- Không Cần Cài Đặt — Hoạt động ngay lập tức trong mọi trình duyệt hiện đại
- Quyền Riêng Tư — Tất cả quá trình xử lý diễn ra cục bộ, không có dữ liệu nào được gửi đi đâu cả
FreeToolbox So Với Các Công Cụ Flexbox Khác
| Tính Năng | FreeToolbox | Flexbox Froggy | Hướng Dẫn CSS-Tricks |
|---|---|---|---|
| Tương tác | Trình chỉnh sửa đầy đủ | Dựa trên trò chơi | Ví dụ tĩnh |
| Thuộc tính cho từng item | Có | Hạn chế | Không |
| Xuất CSS | Có | Không | Không |
| Hỗ trợ Gap | Có | Không | Không áp dụng |
| Giao diện tối | Có | Không | Không |
Câu hỏi thường gặp
Tôi có thể thêm bao nhiêu item?
Bạn có thể có từ 1 đến 10 flex item. Mỗi item được mã hóa màu và có thể định cấu hình riêng lẻ.
flex-grow làm gì?
flex-grow xác định mức độ một item sẽ phát triển so với các item khác khi có thêm không gian. Giá trị 0 có nghĩa là không phát triển, 1 có nghĩa là nó chiếm phần không gian còn lại của nó.
Sự khác biệt giữa flex-basis và width là gì?
flex-basis đặt kích thước ban đầu của một flex item trước khi phân phối không gian. Nó hoạt động dọc theo trục chính (chiều rộng theo hướng hàng, chiều cao theo cột). Không giống như width, nó tham gia vào thuật toán flex.
Tôi có thể sử dụng công cụ này cho bố cục responsive không?
Có. Kết hợp flex-wrap với các giá trị flex-basis dựa trên phần trăm để tạo bố cục responsive. Playground giúp bạn thử nghiệm trước khi viết CSS cuối cùng.
Công cụ này có miễn phí không?
Có, hoàn toàn miễn phí, không giới hạn hoặc yêu cầu đăng ký.