Chuyển đến nội dung chính
LibraTool logoLibraTool

Trình Tạo CSS Flexbox miễn phí

Thử nghiệm hướng flex, xuống dòng, căn chỉnh trên các mục trực tiếp — và sao chép CSS.

Hoạt động ngoại tuyến sau khi tải
Cài đặt sẵn

Mẹo: nhấp vào một mục trong bản xem trước để bật flex-grow: 1 trên nó.

Xem trước trực tiếp
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
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>

🔒 Mọi thứ chạy trong trình duyệt của bạn — không có gì được tải lên.

Cách hoạt động

Sân chơi flexbox tương tác: đổi flex-direction, wrap, justify-content và align-items và xem tối đa 10 phần tử trực tiếp sắp xếp lại ngay lập tức. Nhấp vào phần tử bất kỳ để đặt flex-grow: 1 và xem nó chiếm không gian thế nào. CSS cập nhật trực tiếp, sẵn sàng sao chép vào dự án của bạn.

  1. 1
    Thiết lập vùng chứa
    Hướng, xuống dòng, justify-content, align-items, khoảng cách (gap).
  2. 2
    Thêm phần tử
    Từ một đến mười phần tử flex được đánh số.
  3. 3
    Thử nghiệm
    Nhấp vào một phần tử để bật/tắt flex-grow và xem hiệu quả.
  4. 4
    Sao chép CSS
    Các quy tắc của vùng chứa (và phần tử), sẵn sàng để dán.

Mọi thứ chạy trong trình duyệt — không có gì được tải lên.

Công cụ liên quan

🟦

Trình Tạo Lưới CSS

Thiết kế trực quan một lưới CSS — các track, đơn vị và khoảng cách — và sao chép CSS và HTML được tạo.

Thử ngay
🌈

Tạo CSS Gradient

Tạo gradient CSS tuyến tính, hướng tâm và cônic với xem trước trực tiếp. Sao chép CSS chỉ bằng một cú nhấp.

Thử ngay
🎨

Tạo CSS Box Shadow

Trình tạo trực quan cho CSS box-shadow với xem trước trực tiếp, xếp lớp nhiều tầng, bảng chọn màu, chuyển đổi inset và sao chép một cú nhấp. Bao gồm cài đặt sẵn Material, neumorphism và glow.

Thử ngay

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