Thuộc tính flex là một thuộc tính viết tắt kết hợp ba thuộc tính khác nhau:
flex: flex-grow flex-shrink flex-basis;- flex-grow: Khả năng mở rộng khi có khoảng trống.
- flex-shrink: Khả năng thu nhỏ khi không đủ không gian.
- flex-basis: Kích thước cơ bản ban đầu của phần tử trước khi phân phối không gian.
Phân tích các giá trị phổ biến của flex
| Viết tắt | Grow | Shrink | Basis | Mục đích sử dụng |
|---|---|---|---|---|
flex: 1 |
1 | 1 | 0 | Chia đều không gian |
flex: auto |
1 | 1 | auto | Dựa vào nội dung nhưng vẫn co giãn |
flex: none |
0 | 0 | auto | Không thay đổi kích thước |
flex: 0 0 200px |
0 | 0 | 200px | Cố định chiều rộng |
flex: 2 |
2 | 1 | 0 | Chiếm gấp đôi không gian |
flex: 1 0 auto |
1 | 0 | auto | Cho phép mở rộng nhưng không thu hẹp |
Chi tiết từng thành phần
1. flex-grow (Mở rộng)
Xác định khả năng mở rộng của phần tử khi container còn dư không gian.
flex-grow: 1; /* Chiếm 1 phần */
flex-grow: 2; /* Chiếm 2 phần */
flex-grow: 0; /* Không mở rộng */2. flex-shrink (Co lại)
Kiểm soát việc phần tử có bị thu nhỏ hay không khi tổng kích thước vượt quá container.
flex-shrink: 1; /* Cho phép thu nhỏ */
flex-shrink: 0; /* Không cho phép thu nhỏ */3. flex-basis (Kích thước cơ sở)
Định nghĩa kích thước ban đầu của phần tử trước khi áp dụng flex-grow hoặc flex-shrink.
flex-basis: 200px; /* Cố định 200px */
flex-basis: auto; /* Dựa vào nội dung */
flex-basis: 0; /* Không có kích thước ban đầu */Các mẫu viết tắt thường gặp
flex: 1
flex: 1 1 0;- Tăng/giảm đều được
- Kích thước khởi tạo bằng 0 → chia đều không gian
flex: none
flex: 0 0 auto;- Không tăng, không giảm
- Kích thước dựa trên nội dung
flex: auto
flex: 1 1 auto;- Vừa có thể tăng, vừa có thể giảm
- Bắt đầu từ kích thước nội dung
Giữ nguyên độ rộng cố định kèm xuống dòng
flex: 0 0 200px;- Mỗi mục chiếm đúng 200px
- Nếu không đủ chỗ sẽ tự động xuống dòng