Tạo Flexbox

Tạo CSS Flexbox - Học và Tạo Layout Flex

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 sẵn sàng sử dụng. Hoàn hảo cho cả học flexbox và tạo layout sản xuất.

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!

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
• 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