Về công cụ này
Flexbox là xương sống của layout CSS hiện đại, nhưng các thuộc tính của nó khó nhớ cho đến khi bạn thấy chúng hoạt động. Bộ tạo này biến flex-direction, justify-content, align-items, flex-wrap và gap thành các điều khiển đơn giản, với một hàng item thật sắp xếp lại ngay khi bạn thay đổi bất cứ gì.
Đây là cách nhanh nhất để hiểu các thuộc tính tương tác ra sao — và khi layout đã ưng, copy CSS của container. Mọi thứ chạy trong trình duyệt.
Câu hỏi thường gặp
Công cụ này tạo CSS cho container hay cho từng phần tử con?
Nó tạo các thuộc tính flex của container cha (flex-direction, justify-content, align-items, flex-wrap, gap) — các thuộc tính riêng cho từng phần tử như flex-grow hay order không được bao gồm.
justify-content và align-items khác nhau ở điểm nào?
justify-content kiểm soát khoảng cách theo trục chính (theo chiều ngang trong bố cục row), còn align-items kiểm soát căn chỉnh theo trục ngang (theo chiều dọc trong bố cục row).
Dự án hiện đại có cần tiền tố trình duyệt cho flexbox không?
Không, mọi trình duyệt hiện nay đều hỗ trợ các thuộc tính flexbox không cần tiền tố; cú pháp cũ -webkit-box / -ms-flexbox chỉ cần cho các trình duyệt hơn mười năm tuổi.
Dữ liệu bố cục của tôi có được tải lên đâu không?
Không. Bản xem trước và CSS được tạo ra chạy hoàn toàn trong trình duyệt của bạn — không có gì được gửi lên máy chủ.
Vì sao giá trị gap không hoạt động trên một số trình duyệt cũ?
Thuộc tính gap trong container flex được mọi trình duyệt phát hành sau năm 2021 hỗ trợ; với trình duyệt cũ hơn, hãy dùng margin trên các phần tử thay thế.