Trình tạo CSS Flexbox
Công cụ tạo CSS Flexbox cho phép bạn đặt flex-direction, justify-content, align-items, flex-wrap, align-content và gap cho container, xem trước trực tiếp tối đa 20 phần tử và sao chép CSS được tạo.
Về công cụ này
Công cụ tạo CSS Flexbox cho phép bạn đặt flex-direction, justify-content, align-items, flex-wrap, align-content và gap cho container, xem trước trực tiếp tối đa 20 phần tử và sao chép CSS được tạo.
Cách sử dụng
- Chọn hướng và cách xuống dòng.
- Đặt justify-content và align-items (và align-content khi có nhiều dòng).
- Đặt gap và số phần tử xem trước.
- Bấm Copy CSS để dùng các quy tắc cho container.
Điều nên biết
- justify-content căn các phần tử theo trục chính; align-items căn chúng theo trục phụ.
- flex-direction: column hoán đổi hai trục, khi đó justify-content hoạt động theo chiều dọc.
- align-content chỉ có tác dụng khi các phần tử xuống thành nhiều dòng.
- Thuộc tính gap hoạt động với Flexbox trên mọi trình duyệt lớn hiện nay.
- Flexbox là bố cục một chiều; hãy dùng CSS Grid khi cần cả hàng và cột cùng lúc.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Làm sao để căn giữa div bằng Flexbox?
Trên phần tử cha, đặt display: flex; justify-content: center; align-items: center; — phần tử con sẽ được căn giữa theo cả chiều ngang và chiều dọc.
justify-content và align-items khác nhau thế nào?
justify-content phân bố các phần tử theo trục chính (mặc định là hàng ngang); align-items định vị chúng theo trục phụ.
Khi nào nên dùng Flexbox thay vì Grid?
Dùng Flexbox cho bố cục một chiều như thanh điều hướng và hàng nút, còn Grid cho bố cục trang hai chiều.
Vì sao align-content không có tác dụng?
align-content chỉ áp dụng khi flex-wrap cho phép các phần tử xuống thành nhiều hơn một dòng.