Trình chỉnh sửa Flexbox
Công cụ chỉnh sửa bố trí Flexbox miễn phí trực tuyến, có khả năng xem trước dữ liệu một cách trực quan và theo thời gian thực
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.
Nếu công cụ này đã giúp ích cho bạn, hãy nghĩ đến việc mua một cốc cà phê cho tôi.
Hãy mua cho tôi một cốc cà phê nhé.