Trình chỉnh Flexbox
Trình soạn layout Flexbox miễn phí trực tuyến, xem trước trực quan
Tham khảo thuộc tính Flexbox
flex-direction: row | column | row-reverse | column-reverse. justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly. align-items: stretch | flex-start | center | flex-end | baseline. flex-wrap: nowrap | wrap. gap: khoảng cách giữa các mục.
Cách sử dụng Flexbox Editor
Điều chỉnh thuộc tính container flex sử dụng các điều khiển. Bản xem trước hiển thị cách các mục được sắp xếp theo thời gian thực. Thêm hoặc xóa mục để thử nghiệm các cấu hình khác nhau. Sao chép CSS đã tạo cho dự án của bạn.
▶Sự khác biệt giữa justify-content và align-items là gì?
justify-content kiểm soát căn chỉnh dọc theo trục chính (ngang cho row, dọc cho column). align-items kiểm soát căn chỉnh dọc theo trục chéo (vuông góc với trục chính).
▶Làm thế nào để căn giữa phần tử với Flexbox?
Đặt cha thành display: flex; justify-content: center; align-items: center; Điều này căn giữa phần tử con cả theo chiều ngang và chiều dọc.
▶flex-wrap làm gì?
Theo mặc định, flex item cố gắng nằm trên một dòng (nowrap). Đặt flex-wrap: wrap cho phép các mục chuyển sang dòng tiếp theo khi hết không gian.