Flexbox Generator kèm xem trước trực tiếp
Flexbox Generator là công cụ trực quan giúp bạn dựng layout Flexbox mà không phải viết code từ đầu. Bấm các nút và điều chỉnh thông số để định hình container cùng các item, xem layout cập nhật theo thời gian thực, rồi sao chép đoạn CSS gọn gàng thẳng vào dự án.
Flexbox là một trong những hệ thống layout mạnh nhất của CSS, nhưng các thuộc tính như justify-content, align-items và flex-wrap, cùng với điều khiển riêng từng item như flex-grow và align-self, cần thời gian để ghi nhớ. Công cụ này cho bạn thử nghiệm một cách trực quan và thấy kết quả tức thì, nên phù hợp với người mới đang học cách từng thuộc tính hoạt động, lập trình viên dựng nhanh một layout, và nhà thiết kế muốn khám phá các phương án trước khi bàn giao.
Cách dùng Flexbox Generator
Cấu hình container
Trong phần Container, đặt các thuộc tính flex cho phần tử cha: flex-direction (row hoặc column), flex-wrap, justify-content trên trục chính, align-items trên trục phụ, align-content cho các dòng đã wrap, và gap theo hàng và cột.
Quản lý các item
Dùng Thêm item và Xóa item để đặt số ô bạn cần, tối đa 12 ô. Bấm vào một chip màu, hoặc bấm thẳng vào một item trong khu xem trước, để chọn item muốn chỉnh sửa.
Tùy chỉnh item đã chọn
Với item đã chọn, điều chỉnh order, flex-grow, flex-shrink và flex-basis để kiểm soát kích thước, ghi đè container bằng align-self, đồng thời đặt width, height và padding cụ thể. Tạo kiểu trực quan bằng màu background và border-radius.
Sao chép CSS tạo ra
CSS tự cập nhật và chỉ gồm những thuộc tính khác mặc định, giúp kết quả gọn tối thiểu. Nhấn Sao chép để đưa code vào clipboard, hoặc Đặt lại để quay về bốn item mặc định.
Tính năng
Kiểm soát đầy đủ container
Đặt cả sáu thuộc tính container — flex-direction, flex-wrap, justify-content, align-items, align-content và gap — qua các nhóm nút có nhãn hiển thị giá trị CSS thật.
Thuộc tính flex riêng từng item
Chọn bất kỳ item nào để chỉnh order, flex-grow, flex-shrink, flex-basis và align-self độc lập với container.
Tạo kiểu trực quan cho item
Cho mỗi item một màu nền, border-radius, width và height cụ thể, cùng padding tùy chỉnh để khu xem trước khớp với thiết kế của bạn.
Xem trước trực tiếp
Mọi thay đổi cập nhật tức thì. Container hiển thị với viền nét đứt và mỗi item có màu riêng để dễ nhận biết.
Bấm để chọn item
Chọn item cần chỉnh bằng cách bấm vào chip của nó trong danh sách hoặc bấm thẳng vào nó trong khu xem trước.
Thêm hoặc xóa item
Dựng layout với từ một đến mười hai flex item và điều chỉnh số lượng bất cứ lúc nào.
Code đầu ra gọn gàng
CSS tạo ra chỉ liệt kê thuộc tính khác mặc định, gom luật của container vào .container và ghi đè từng item vào selector .item-N.
Kích thước container điều chỉnh được
Đổi chiều rộng khu xem trước theo phần trăm và chiều cao theo pixel để mô phỏng các khung nhìn khác nhau và kiểm tra layout phản hồi ra sao.
Sao chép một cú nhấp
Sao chép đoạn CSS sẵn dùng vào clipboard chỉ với một cú nhấp, rồi dán thẳng vào stylesheet của bạn.
Đặt lại về mặc định
Khôi phục mọi thứ chỉ với một cú nhấp — bốn item, không thuộc tính tùy chỉnh, và container rộng 100% cao 300px.
Câu hỏi thường gặp
justify-content và align-items khác nhau thế nào?
justify-content căn các item dọc theo trục chính — nằm ngang khi là row, nằm dọc khi là column. align-items căn các item dọc theo trục phụ, hướng ngược lại. Trong layout dạng row, justify-content lo khoảng cách ngang còn align-items lo căn dọc.
Làm sao căn giữa một div bằng Flexbox?
Trên container, đặt justify-content thành center và align-items thành center. Như vậy các item được căn giữa cả theo chiều ngang lẫn chiều dọc. Chọn hai giá trị đó trong công cụ và khu xem trước sẽ căn giữa các item ngay.
Khi nào align-content có tác dụng?
align-content chỉ áp dụng khi flex-wrap được đặt thành wrap (hoặc wrap-reverse) và các item trải trên nhiều dòng. Nó kiểm soát cách các dòng đó được phân bố dọc theo trục phụ. Với một dòng duy nhất thì nó không có tác dụng nhìn thấy được.
flex-grow và flex-basis khác nhau thế nào?
flex-basis đặt kích thước ban đầu của item trước khi không gian được phân bổ, còn flex-grow quyết định item giành bao nhiêu phần không gian còn dư. Một item với flex-basis: 100px và flex-grow: 1 bắt đầu ở 100px rồi nở ra để lấp đầy khoảng trống có sẵn.
Flexbox và CSS Grid khác nhau thế nào?
Flexbox là hệ thống một chiều, dàn các item dọc theo một trục duy nhất — một hàng hoặc một cột — và lý tưởng cho thanh công cụ, điều hướng và căn chỉnh các item trên một dòng. CSS Grid là hai chiều, sắp xếp các item theo hàng và cột cùng lúc, hợp hơn cho layout toàn trang. Công cụ này tập trung vào Flexbox.
Tại sao code tạo ra không gồm mọi thuộc tính?
Công cụ chỉ xuất những thuộc tính khác giá trị mặc định của CSS, giúp code gọn và tối thiểu. Ví dụ nếu flex-direction giữ ở row (mặc định) thì nó bị bỏ qua trong kết quả.
Tôi có thể dùng CSS tạo ra trực tiếp trong dự án không?
Có. Đoạn CSS sẵn sàng cho production — sao chép và áp các tên lớp (.container, .item-1, v.v.) vào HTML của bạn. Bạn có thể đổi tên các selector cho khớp với quy ước đặt tên của riêng mình.
Chưa có bình luận nào. Hãy là người đầu tiên!