CSS Flexbox
1
2
3
4
5
6
7
số 8
Mô-đun bố cục CSS Flexbox
Trước mô-đun Bố cục Flexbox, có bốn chế độ bố cục:
- Chặn các phần trong trang web
- Nội tuyến, cho văn bản
- Bảng, cho dữ liệu bảng hai chiều
- Định vị, cho vị trí rõ ràng của một phần tử
Mô-đun Bố cục Hộp Linh hoạt, giúp thiết kế cấu trúc bố cục linh hoạt đáp ứng dễ dàng hơn mà không cần sử dụng float hoặc định vị.
Hỗ trợ trình duyệt
Thuộc tính flexbox được hỗ trợ trong tất cả các trình duyệt hiện đại.
29.0 | 11.0 | 22.0 | 10 | 48 |
Các phần tử Flexbox
Để bắt đầu sử dụng mô hình Flexbox, trước tiên bạn cần xác định vùng chứa flex.
1
2
3
Phần tử trên biểu thị một thùng chứa linh hoạt (vùng màu xanh) với ba mục linh hoạt.
Ví dụ
Một thùng chứa linh hoạt có ba mục linh hoạt:
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Bạn sẽ tìm hiểu thêm về các thùng chứa linh hoạt và các mục linh hoạt trong các chương tiếp theo.