Thử nghiệm các thuộc tính flexbox trên bản xem trước trực tiếp và sao chép CSS được tạo ra.
Về công cụ này
CSS Flexbox Playground là một trình chỉnh sửa tương tác cho các thuộc tính bố cục chính của một flex container. Hãy chọn giá trị cho flex-direction, justify-content, align-items và flex-wrap từ bốn menu thả xuống, và một bản xem trước gồm năm hộp được đánh số sẽ sắp xếp lại ngay lập tức, để bạn thấy mỗi thuộc tính định hình bố cục thế nào trước khi viết bất kỳ dòng code nào.
Bên dưới bản xem trước, quy tắc .container tương ứng được tạo khi bạn thao tác: display: flex theo sau bởi bốn khai báo bạn đã chọn. Một nút sao chép cả khối vào bộ nhớ tạm của bạn, sẵn sàng để dán vào một bảng kiểu. Chỉ các thuộc tính cấp container này được phơi ra; các thiết lập cấp phần tử như flex-grow, order hay align-self không được bao gồm.
Mọi thứ chạy trong trình duyệt của bạn. Không có gì được tải lên, không tài khoản hay theo dõi, và nó hoạt động offline. Đây là cách nhanh để xây dựng trực giác về flexbox hoặc để tạo một quy tắc khởi đầu mà sau đó bạn tinh chỉnh bằng tay.
Câu hỏi thường gặp
Bản xem trước hiển thị gì?
Một flex container chứa năm hộp được đánh số, sắp xếp lại trực tiếp khi bạn thay đổi flex-direction, justify-content, align-items hay flex-wrap.
CSS được tạo có sẵn sàng để dùng không?
Có. Sao chép quy tắc .container được tạo thẳng vào bảng kiểu của bạn; nó chứa display: flex cộng với bốn thuộc tính bạn đã chọn.
Tôi có thể điều chỉnh những thuộc tính flexbox nào?
Bốn menu thả xuống điều khiển flex-direction (row, row-reverse, column, column-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline) và flex-wrap (nowrap, wrap, wrap-reverse).
Đầu ra có bao gồm gap hay các thiết lập flex cấp phần tử không?
Không. Quy tắc được sao chép chỉ chứa display: flex và bốn thuộc tính cấp container. Khoảng gap 8px trong bản xem trước chỉ để tạo khoảng cách, và các thuộc tính cấp phần tử như flex-grow, order hay align-self không được bao gồm.