⚡Tất cả công cụ 💻Công cụ dành cho nhà phát triển 📝Văn bản & Viết 🎨Thiết kế & Màu sắc 🖼️Hình ảnh & Phương tiện 🔢Toán & Máy tính 🔒Bảo mật & Mã hóa 📄Công cụ PDF 📐Bộ chuyển đổi đơn vị

Trình tạo bố cục CSS Flexbox & Grid

Định cấu hình và xem trước trực quan bố cục CSS Flexbox và Grid grid, xem hoạt ảnh và sao chép mã CSS.

Mặt hàng

Hướng linh hoạt

Căn đều nội dung (Trục chính)

Căn chỉnh các mục (Trục chéo)

Bọc Flex

Khoảng cách 12px

Xem trước trực tiếp Vùng chứa

Mã CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

Mã HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Cách sử dụng

1 Mở Trình tạo bố cục CSS Flexbox & Grid, sau đó nhập, dán hoặc chọn nội dung cần xử lý.
2 Điều chỉnh tùy chọn và định dạng đầu ra theo nhu cầu.
3 Kiểm tra kết quả, sau đó sao chép hoặc tải đầu ra có sẵn.

Trường hợp sử dụng

Định cấu hình và xem trước trực quan bố cục CSS Flexbox và Grid grid, xem hoạt ảnh và sao chép mã CSS. Phù hợp cho công việc, lập trình, học tập hoặc kiểm tra nhanh.

Quyền riêng tư và xử lý dữ liệu

Công cụ chạy trong trình duyệt. Trước khi xử lý dữ liệu nhạy cảm, hãy bảo đảm thiết bị và trình duyệt đáng tin cậy.

Trình tạo bố cục CSS Flexbox và Grid: chỉnh trực quan và sao chép mã

Công cụ này giúp bạn dựng bố cục Flexbox hoặc CSS Grid bằng các menu chọn mà không cần nhớ cú pháp. Ở trên cùng, bạn chuyển giữa Hộp Flexbox và CSS Grid, dùng nút cộng trừ để đặt từ 1 đến 12 phần tử rồi chọn các thuộc tính. Bản xem trước áp dụng thay đổi ngay lập tức, bên dưới là CSS của vùng chứa và cấu trúc HTML tương ứng, mỗi phần có nút sao chép riêng. Kết quả mặc định là .container { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 12px; }

Chế độ Flexbox gồm flex-direction (row, row-reverse, column, column-reverse), justify-content cho trục chính (có space-between, space-around, space-evenly), align-items cho trục phụ (có stretch và baseline) và flex-wrap. Hãy nhớ trục chính đổi theo hướng: khi flex-direction là column, justify-content điều khiển vị trí theo chiều dọc còn align-items điều khiển theo chiều ngang. Khi các phần tử rộng hơn vùng chứa, nowrap sẽ dồn tất cả trên một hàng, chỉ có wrap mới cho chúng xuống dòng.

Chế độ Grid có các mẫu cột thông dụng: các cột bằng nhau từ repeat(2, 1fr) đến repeat(4, 1fr), cột giữa rộng hơn với 1fr 2fr 1fr, và kiểu đáp ứng repeat(auto-fit, minmax(100px, 1fr)) tự đặt số cột tối đa vừa với chiều rộng vùng chứa. Hàng có thể là auto, repeat(2, 80px) hoặc 1fr 1fr; justify-items và align-items quyết định vị trí ngang và dọc của từng phần tử trong ô. Cả hai chế độ dùng chung thanh trượt khoảng cách gap (0 đến 40px), đặt khoảng cách cho cả hàng lẫn cột cùng lúc, gọn hơn so với thêm margin cho từng phần tử.

Mã được tạo chỉ gồm các quy tắc bố cục của .container và cấu trúc HTML của .item; màu sắc, kích thước và khoảng đệm của phần tử bạn tự viết theo thiết kế. Nguyên tắc đơn giản: dùng Flexbox cho sắp xếp một chiều như một hàng nút, thanh điều hướng hay căn giữa một phần tử; dùng Grid cho bố cục hai chiều cần căn cả hàng và cột như lưới thẻ hoặc bảng điều khiển. Mọi thay đổi cập nhật tức thì trong trình duyệt, nên bạn có thể thử thoải mái để thấy tác dụng của từng thuộc tính.

Câu hỏi thường gặp

Nên dùng Flexbox hay Grid?

Flexbox phù hợp với sắp xếp một chiều theo một hàng hoặc một cột như menu, nhóm nút hay căn giữa phần tử. Grid phù hợp với bố cục hai chiều cần căn thẳng cả hàng và cột như danh sách thẻ hoặc khung trang. Hai cách thường kết hợp: Grid cho khung trang, Flexbox bên trong từng thành phần.