Trình tạo CSS Flexbox

Bố cục flexbox có hai sổ quy tắc riêng biệt — các thuộc tính trên vùng chứa (flex-direction,justify-content, Align-items, flex-wrap, Gap) và các thuộc tính trên mỗi phần tử con (flex-grow, flex-shrink, flex-basis) — và việc trộn lẫn chúng với nhau là nguyên nhân phổ biến nhất của lỗi "tại sao điều này không tập trung/tăng trưởng/đóng gói theo cách tôi mong đợi". Trình tạo này hiển thị cả hai sổ quy tắc trên màn hình cùng một lúc: thay đổi bất kỳ điều khiển vùng chứa nào hoặc trường riêng của bất kỳ trẻ nào và ba hộp được đánh số, mã màu sẽ cập nhật ngay lập tức, do đó nguyên nhân và kết quả vẫn hiển thị.

Phía vùng chứa bao gồm mọi trục bố cục: chọn một hướng, chọn cách phân bổ các phần tử con dọc theo trục chính với nội dung căn đều, căn chỉnh chúng trên trục chéo, quyết định xem chúng có quấn vào các dòng mới hay không và đặt khoảng cách thay vì cắt lề giữa chúng. Phía con cũng giống như vậy: thêm tối đa tám hộp, loại bỏ xuống còn hai và cung cấp cho bất kỳ hộp nào trong số chúng cơ sở flex-grow, flex-shrink và flex-basic của riêng chúng - trình tạo chỉ in quy tắc CSS cho mỗi con khi ít nhất một trong số đó khác với mặc định của trình duyệt, vì vậy mã được sao chép không bao giờ tự đệm bằng flex-grow: 0 trên các hộp không cần đến nó.

Các trang đặt trước sẽ chuyển thẳng đến bố cục mà mọi người thực sự tìm kiếm theo tên: cách căn giữa div (câu hỏi về bố cục CSS được hỏi nhiều nhất, được giải quyết bằng cả hai đều căn chỉnh nội dung và căn chỉnh các mục ở giữa), thanh điều hướng bên phải liên kết bên trái logo, các cột linh hoạt có chiều rộng bằng nhau thông qua flex-grow và so sánh song song giữa không gian giữa với họ hàng gần của nó là không gian xung quanh và không gian đều nhau.

Giống như mọi công cụ trên trang web này, trình tạo này miễn phí và chạy hoàn toàn trong trình duyệt của bạn: không cần tải lên, không cần tài khoản và nó tiếp tục hoạt động ngoại tuyến sau khi trang được tải.