Tạo Flexbox

Trình Dựng Flexbox Trực Quan với Xem Trước và Xuất Code

Công cụ tạo CSS Flexbox tương tác và học tập. Trực quan hóa cách các thuộc tính flexbox hoạt động theo thời gian thực. Điều chỉnh thuộc tính container và item với xem trước tức thì. Xuất code CSS dùng flex shorthand chuẩn kèm khối mã HTML tương ứng, để bạn dán nguyên đoạn container và item thẳng vào dự án.

CSS Flexbox là gì?

CSS Flexbox (Flexible Box Layout) là phương pháp layout một chiều để sắp xếp items theo hàng hoặc cột. Nó làm cho các layout phức tạp trở nên đơn giản và responsive.

Khái niệm chính:

Flex Container:
- Phần tử cha với display: flex
- Kiểm soát sắp xếp các item con
- Thuộc tính: flex-direction, flex-wrap, justify-content, align-items, gap

Flex Items:
- Con trực tiếp của flex container
- Có thể grow, shrink và căn chỉnh độc lập
- Thuộc tính: flex-grow, flex-shrink, flex-basis, align-self, order

Ưu điểm:
- Căn giữa dọc dễ dàng
- Cột chiều cao bằng nhau
- Khoảng cách linh hoạt
- Responsive không cần media queries
- Sắp xếp lại items trực quan

flex-direction hoạt động như thế nào?

flex-direction xác định trục chính và luồng item:

Giá trị:
- row (mặc định): Trái sang phải →
- row-reverse: Phải sang trái ←
- column: Trên xuống dưới ↓
- column-reverse: Dưới lên trên ↑

Trục Chính vs Trục Phụ:
- row: trục chính = ngang, trục phụ = dọc
- column: trục chính = dọc, trục phụ = ngang

Điều này ảnh hưởng:
- justify-content (căn chỉnh trục chính)
- align-items (căn chỉnh trục phụ)
- cách hiểu flex-basis

Mẹo sử dụng:
- Dùng column để xếp chồng
- Dùng row cho layout ngang
- Kết hợp với flex-wrap cho lưới responsive

Sự khác nhau giữa justify-content và align-items là gì?

Chúng kiểm soát căn chỉnh trên các trục khác nhau:

justify-content (Trục Chính):
- flex-start: Gom items ở đầu
- flex-end: Gom items ở cuối
- center: Căn giữa items
- space-between: Khoảng cách đều giữa items
- space-around: Khoảng cách đều xung quanh items
- space-evenly: Khoảng cách bằng nhau mọi nơi

align-items (Trục Phụ):
- stretch: Kéo dãn để lấp đầy container
- flex-start: Căn chỉnh về đầu
- flex-end: Căn chỉnh về cuối
- center: Căn giữa items
- baseline: Căn chỉnh baseline của text

Mẫu phổ biến:
center + center = Căn giữa hoàn hảo
space-between + center = Thanh điều hướng
flex-start + stretch = Layout sidebar

flex-grow, flex-shrink và flex-basis hoạt động như thế nào?

Những thuộc tính này kiểm soát cách items tự định kích thước:

flex-grow (mặc định: 0):
- Item phát triển bao nhiêu so với các item khác
- 0 = không phát triển
- 1 = phát triển bằng nhau với các item flex-grow: 1 khác
- 2 = phát triển gấp đôi item flex-grow: 1

flex-shrink (mặc định: 1):
- Item co lại bao nhiêu khi không gian hẹp
- 0 = không co lại
- 1 = co lại bằng nhau
- Cao hơn = co lại nhiều hơn

flex-basis (mặc định: auto):
- Kích thước ban đầu trước khi grow/shrink
- auto = sử dụng content/width/height
- 0 = bỏ qua kích thước content
- 200px = bắt đầu ở 200px
- 25% = bắt đầu ở 25% của container

Viết tắt:
flex: 1 = flex: 1 1 0 (grow, no shrink, 0 basis)
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto

Các mẫu layout flexbox phổ biến là gì?

Các mẫu flexbox phổ biến:

Căn giữa:
justify-content: center;
align-items: center;

Thanh Điều hướng:
justify-content: space-between;
align-items: center;

Cột Chiều rộng Bằng nhau:
.item { flex: 1; }

Layout Sidebar:
.sidebar { flex: 0 0 250px; }
.main { flex: 1; }

Holy Grail (3 cột):
.left { flex: 0 0 200px; }
.center { flex: 1; }
.right { flex: 0 0 200px; }

Lưới Card:
flex-wrap: wrap;
gap: 20px;
.card { flex: 0 0 calc(33.33% - 20px); }

Sticky Footer:
.container { min-height: 100vh; flex-direction: column; }
.content { flex: 1; }
.footer { flex-shrink: 0; }

Công cụ này bao gồm các preset này!

flex shorthand (flex: grow shrink basis) nghĩa là gì?

flex là cách viết tắt của flex-grow, flex-shrink và flex-basis theo thứ tự đó. Hầu hết codebase và linter đều mong đợi nó thay vì ba dòng riêng, nên công cụ này xuất nó mặc định (tắt đi để xem dạng dài).

flex: 1 1 0 → giãn để lấp đầy, có thể co, bỏ qua kích thước nội dung (cột bằng nhau)
flex: 0 0 200px → cố định 200px, không giãn không co (sidebar)
flex: 1 1 auto → giãn nhưng bắt đầu từ kích thước nội dung

Các dạng một giá trị phổ biến:
flex: 1 = flex: 1 1 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto
flex: initial = flex: 0 1 auto (mặc định)

Trường hợp đặc biệt:
- Một giá trị đơn không có đơn vị (flex: 1) đặt flex-basis thành 0, không phải auto. Điều này dễ gây nhầm: flex: 1 co về nội dung bằng 0, trong khi chỉ flex-grow: 1 vẫn giữ flex-basis: auto.
- Luôn thêm đơn vị vào basis (0% hoặc 0px) nếu muốn rõ ràng.

Flexbox vs CSS Grid: khi nào dùng cái nào?

Chúng giải quyết các vấn đề khác nhau và thường phối hợp với nhau.

Dùng Flexbox cho layout một chiều (một hàng hoặc một cột): thanh điều hướng, toolbar, nhóm nút, căn giữa một phần tử, phân bố items dọc một trục với gap và justify-content. Flexbox lấy nội dung làm gốc.

Dùng CSS Grid cho layout hai chiều (hàng và cột cùng lúc): khung trang, thư viện ảnh, dashboard, bất cứ thứ gì cần track rõ ràng và căn chỉnh theo cả hai hướng. Grid lấy cấu trúc làm gốc.

Quy tắc nhanh:
- Căn items trên một đường → Flexbox
- Dựng lưới thực sự gồm hàng và cột → Grid
- Một trang thực tế thường dùng Grid cho bộ khung và Flexbox bên trong từng ô.

Cả hai đều hỗ trợ thuộc tính gap và cùng các từ khóa căn chỉnh (justify-content, align-items).

Tính năng chính

• Xem trước trực tiếp tương tác
• Tất cả thuộc tính container (direction, wrap, justify, align)
• Tất cả thuộc tính item (grow, shrink, basis, align-self, order)
• Thêm và xóa flex items
• Nhấp items để chỉnh sửa thuộc tính riêng lẻ
• Kiểm soát gap cho khoảng cách
• 8 mẫu layout có sẵn
• Sao chép code CSS sẵn sàng sử dụng
• Xuất flex shorthand chuẩn (bật/tắt được)
• Khối mã HTML tương ứng có thể sao chép
• Công cụ học tập trực quan
• Giao diện Material Design
• Xử lý 100% phía client
• Không giao tiếp server
• Hoạt động offline
• Hỗ trợ chế độ tối
• Giao diện thân thiện với mobile