Sân chơi Flexbox
Thử nghiệm các thuộc tính CSS Flexbox trên các mục trực tiếp và sao chép CSS bố cục được tạo.
—
Mọi thứ chạy trong trình duyệt của bạn — không có gì được tải lên.
Giới thiệu về Sân chơi Flexbox
Flexbox Playground là một sân chơi thực hành cho CSS flexbox. Thiết lập các thuộc tính của container — flex-direction, flex-wrap, justify-content, align-items, align-content và gap — và xem tối đa 12 phần tử sống động sắp xếp lại trong bản xem trước khi bạn thay đổi từng giá trị. Đây là cách nhanh nhất để hiểu rõ từng thuộc tính thực sự làm gì.
Từng phần tử có thể chỉnh riêng: click chọn một phần tử rồi điều chỉnh flex-grow, flex-shrink, flex-basis, align-self và order. Việc thấy một phần tử phình to để chiếm khoảng trống thừa trong khi các phần tử anh em vẫn giữ nguyên chiều rộng giúp bạn nắm mô hình kích thước flex nhanh hơn bất kỳ sơ đồ nào.
Sân chơi sinh ra CSS gọn gàng cho container và mọi phần tử có thiết lập khác mặc định — sao chép thẳng vào stylesheet của bạn. Mọi thứ chạy ngay trên trình duyệt, không tải lên đâu cả, và nút reset đưa bạn về trạng thái sạch sẽ ban đầu.
Cách sử dụng Sân chơi Flexbox
- Thiết lập flex-direction, wrap, justify-content, align-items, align-content và gap của container.
- Thêm hoặc bớt phần tử — từ 2 đến 12 — để mô phỏng thành phần thực tế của bạn.
- Click chọn một phần tử và tinh chỉnh grow, shrink, basis, align-self và order của nó.
- Theo dõi bản xem trước cập nhật sống động với mỗi thay đổi.
- Sao chép đoạn CSS được sinh ra và dán vào dự án của bạn.