Flexbox Generator

Visually build CSS Flexbox layouts.

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

Số mục: 5

Xem trước trực tiếp

CSS được tạo

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
  gap: 8px;
}

Giới thiệu công cụ

Công cụ tạo CSS Flexbox cho phép cấu hình trực quan một flex container bằng cách điều chỉnh tất cả các thuộc tính flexbox chính — flex-direction, flex-wrap, justify-content, align-items và align-content.

Flexbox là module bố cục CSS dành cho bố cục một chiều (hàng hoặc cột). Hiểu cách từng thuộc tính tương tác là điều quan trọng để xây dựng UI responsive.

Cách sử dụng

Điều chỉnh flex-direction để kiểm soát trục chính (hàng hoặc cột).
Đặt flex-wrap để kiểm soát xem các mục có xuống dòng không.
Dùng justify-content để phân phối mục dọc theo trục chính.
Dùng align-items để căn chỉnh mục dọc theo trục chéo.
Thay đổi số lượng mục xem trước bằng thanh trượt.
Nhấp Sao chép để sao chép CSS được tạo.

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

Nhà phát triển frontend dùng công cụ này để nhanh chóng tạo nguyên mẫu thanh điều hướng, lưới thẻ và thanh công cụ. CSS mới bắt đầu học cách tương tác của thuộc tính flexbox.

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

Sự khác biệt giữa align-items và align-content là gì? — align-items căn chỉnh mục trong một dòng; align-content chỉ áp dụng khi có nhiều dòng (flex-wrap được đặt là wrap).
Flexbox có phù hợp cho bố cục hai chiều không? — Flexbox là một chiều. Dùng CSS Grid cho bố cục lưới phức tạp.
Flexbox có được tất cả trình duyệt hỗ trợ không? — Có. Flexbox được hỗ trợ đầy đủ trong tất cả các trình duyệt hiện đại.