Bộ Sinh CSS Flexbox

Một bố cục flexbox có hai bộ quy tắc riêng biệt — các thuộc tính trên container (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 nhầm lẫn chúng là nguồn gốc phổ biến nhất của các lỗi kiểu "tại sao cái này không căn giữa / giãn ra / xuống dòng như tôi mong đợi". Bộ sinh này đặt cả hai bộ quy tắc lên màn hình cùng lúc: thay đổi bất kỳ điều khiển container nào hoặc bất kỳ trường riêng nào của phần tử con và ba ô được đánh số, phân biệt màu sắc sẽ cập nhật ngay lập tức, do đó nguyên nhân và kết quả luôn hiển thị rõ ràng.

Phía container bao quát mọi trục bố cục: chọn hướng, chọn cách các phần tử con được phân phối dọc theo trục chính với justify-content, căn chỉnh chúng trên trục chéo, quyết định liệu chúng có xuống dòng hay không, và đặt khoảng cách gap thay vì các mẹo lề giữa chúng. Phía phần tử con cũng thực tế không kém: thêm ô lên đến tám, giảm xuống còn hai, và đặt cho bất kỳ ô nào các giá trị flex-grow, flex-shrink và flex-basis riêng — bộ sinh chỉ xuất một quy tắc CSS cho mỗi phần tử con khi có ít nhất một trong số các giá trị đó 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ự thêm flex-grow: 0 vào những ô không cần đến nó.

Các trang cài đặt sẵn nhảy thẳng đến những bố cục mà mọi người thực sự tìm kiếm theo tên: cách căn giữa một div (câu hỏi bố cục CSS được hỏi nhiều nhất, được giải quyết bằng justify-content và align-items cùng đặt thành center), thanh điều hướng logo bên trái - liên kết bên phải, các cột linh hoạt có độ rộng bằng nhau thông qua flex-grow, và một so sánh trực quan giữa space-between với các họ hàng gần của nó là space-around và space-evenly.

Giống như mọi công cụ trên trang này, bộ sinh là miễn phí và chạy hoàn toàn trong trình duyệt của bạn: không 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.