CSS Flexbox là gì?
CSS Flexbox (Flexible Box Layout) là mô hình bố cục một chiều dùng để phân phối không gian và căn chỉnh các mục trong một hàng hoặc cột. Vùng chứa flex được xác định bằng display: flex, và các con trực tiếp của nó trở thành các mục flex. Thuộc tính chính của vùng chứa: flex-direction (hàng hoặc cột), flex-wrap (một dòng so với nhiều dòng), justify-content (căn chỉnh trục chính), align-items (căn chỉnh trục ngang mỗi dòng) và align-content (căn chỉnh trục ngang nhiều dòng). Thuộc tính chính của mục: flex-grow (mục tăng bao nhiêu), flex-shrink (thu lại bao nhiêu), flex-basis (kích thước ban đầu) và align-self (ghi đè align-items của vùng chứa cho một mục cụ thể). Flexbox lý tưởng cho thanh điều hướng, hàng thẻ, bố cục căn giữa và bất kỳ sắp xếp một chiều nào.
Cách sử dụng Trình tạo CSS Flexbox
-
Điều chỉnh thuộc tính vùng chứa (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) bằng các menu thả xuống và ô nhập liệu.
-
Nhấp vào bất kỳ mục nào trong bản xem trước để chọn nó (chuyển sang màu cam).
-
Đặt flex-grow, flex-shrink, flex-basis và align-self của mục đã chọn trong bảng điều khiển mục.
-
Nhấp vào '+ Thêm mục' để thêm mục; nhấp vào 'Xóa' để xóa mục đã chọn.
-
Chuyển đổi giữa các tab CSS và HTML để xem mã được tạo, sau đó nhấp Sao chép.
-
Nhấp vào 'Đặt lại tất cả' để bắt đầu lại với bố cục mặc định gồm 3 mục.