Playground Flexbox
Thử nghiệm CSS Flexbox trực quan.
Contenedor flex
/* Contenedor */
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}
Playground tương tác CSS Flexbox
CSS Flexbox (Flexible Box Layout) là một trong những hệ thống layout mạnh nhất và được sử dụng nhiều nhất trong phát triển web hiện đại. Cho phép phân phối không gian và căn chỉnh phần tử trong container linh hoạt và dự đoán được, ngay cả khi kích thước phần tử chưa biết hoặc động. Flexbox đơn giản hóa đáng kể các tác vụ thiết kế trước đây cần hack phức tạp với float hoặc positioning.
Playground cho phép thử nghiệm trực quan tất cả thuộc tính container flex: flex-direction (hướng trục chính), justify-content (căn chỉnh trục chính), align-items (căn chỉnh trục phụ), flex-wrap (hành vi tràn) và gap (khoảng cách giữa phần tử). Cũng có thể cấu hình thuộc tính riêng của mỗi item: order, flex-grow, flex-shrink và align-self.
Xem trước cập nhật thời gian thực, cho phép thấy ngay mỗi thuộc tính ảnh hưởng đến phân bố phần tử. Có thể thêm và xóa item, nhấp vào item để chọn và chỉnh sửa thuộc tính riêng, và sao chép mã CSS để dùng trực tiếp. Công cụ hoàn hảo để học Flexbox hoặc prototype layout nhanh.
Câu hỏi thường gặp
Khi nào nên dùng Flexbox thay vì Grid?
Flexbox lý tưởng cho layout một chiều (một hàng hoặc một cột), như thanh điều hướng, danh sách thẻ ngang hoặc căn chỉnh phần tử trong container. CSS Grid tốt hơn cho layout hai chiều (hàng và cột đồng thời), như layout toàn trang hoặc bộ sưu tập phức tạp.
Flex-grow làm gì?
flex-grow xác định mức độ item có thể mở rộng để lấp đầy không gian trống trong container. Giá trị 0 (mặc định) nghĩa là item không mở rộng. Nếu một item có flex-grow: 1 và item khác flex-grow: 2, item thứ hai sẽ mở rộng gấp đôi item đầu.
Có tương thích với tất cả trình duyệt không?
Có, CSS Flexbox được hỗ trợ đầy đủ trên mọi trình duyệt hiện đại từ nhiều năm nay. Chrome, Firefox, Safari, Edge và Opera đều hỗ trợ không cần tiền tố. Chỉ Internet Explorer 10-11 có triển khai thiếu và lỗi.
Muốn tìm hiểu thêm? Đọc hướng dẫn đầy đủ →