Bộ tạo Flexbox CSS
Tạo các bố cục CSS bằng flexbox một cách trực quan. Xem kết quả theo thời gian thực trong khi bạn điều chỉnh hướng, căn chỉnh, ngắt dòng và khoảng cách.
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
Cách sử dụng công cụ này
- 1
Pick values from the four dropdowns: flex-direction, justify-content, align-items, and flex-wrap.
- 2
Drag the gap slider to set the spacing between items, from 0 to 40 pixels.
- 3
Watch the live preview of four numbered boxes update instantly to reflect each change.
- 4
Click 'Copy CSS' to copy the generated declaration block, then paste it onto your own flex container.
Bộ tạo Flexbox CSS là gì?
Flexbox là cách hiện đại để sắp xếp các phần tử trong CSS, đơn giản hơn nhiều so với float hay định vị tuyệt đối. Các thuộc tính gồm: flex-direction (hàng hoặc cột), justify-content (căn chỉnh trên trục chính), align-items (trục ngang), flex-wrap và gap. Công cụ này phơi bày tất cả chúng kèm theo bản xem trước theo thời gian thực.
Các trường hợp sử dụng phổ biến
Aligning a horizontal navigation bar so links sit at flex-start and a logo or button pushes to flex-end with space-between.
Centering a single element both horizontally and vertically using justify-content: center and align-items: center.
Spacing a row of buttons or tags evenly with a fixed gap instead of fragile margins.
Stacking form fields vertically by switching flex-direction to column while keeping consistent gap spacing.
Letting a row of cards wrap onto new lines on narrow screens with flex-wrap: wrap.
Learning how justify-content and align-items behave by toggling values and watching the live preview before committing the code.
Câu hỏi thường gặp
Flexbox hay Grid?▼
Công cụ liên quan
Trình chuyển đổi màu (HEX/RGB/HSL)
Chuyển đổi màu giữa các định dạng HEX, RGB và HSL. Chọn màu trực quan hoặc nhập các giá trị thủ công.
Trình tạo Box Shadow CSS
Tạo các giá trị box-shadow trong CSS một cách trực quan. Xem trước theo thời gian thực và sao chép CSS được tạo ra.
Bộ tạo dải màu chuyển sắc CSS
Tạo các dải màu chuyển sắc CSS dạng tuyến tính và tỏa tròn. Chọn màu một cách trực quan và sao chép đoạn CSS được tạo ra.
Bộ tạo đường cong gia tốc Cubic Bezier
Tạo các đường cong gia tốc cubic-bezier cho CSS. Bao gồm các giá trị cài sẵn theo chuẩn.
Trình tạo bảng màu
Tạo các bảng màu hài hòa từ bất kỳ màu cơ sở nào. Hỗ trợ các sơ đồ màu bổ túc, tương đồng, bộ ba và đơn sắc.
Trình tạo Border Radius CSS
Tạo các giá trị border-radius phức tạp trong CSS một cách trực quan. Kiểm soát độc lập từng góc.