Các flex-shrinkbất động sản là một tiểu tài sản của các mô-đun linh hoạt Box Layout.
Nó chỉ định “hệ số co lại linh hoạt”, xác định mức độ thu nhỏ của mục linh hoạt so với phần còn lại của mục linh hoạt trong thùng linh hoạt khi không có đủ không gian trên hàng.
Khi bị bỏ qua, nó được đặt thành 1và hệ số co lại uốn được nhân với cơ sở uốn khi phân phối không gian âm.
Cú pháp
flex-shrink: .flex-item ( flex-shrink: 2; )Bản giới thiệu
Để xem toàn bộ tiềm năng của bản trình diễn này, bạn sẽ phải thay đổi kích thước chiều rộng của nó, vì vậy hãy xem trực tiếp trên CodePen.
Trong bản demo này:
- Mục đầu tiên có
flex: 1 1 20em(viết tắt choflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Mục thứ hai có
flex: 2 2 20em(viết tắt choflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Cả hai mục flex đều muốn rộng 20em. Do flex-grow (tham số đầu tiên), nếu vùng chứa flex lớn hơn 40em, con thứ 2 sẽ chiếm gấp đôi dung lượng còn lại so với con đầu tiên. Nhưng nếu phần tử cha có chiều rộng nhỏ hơn 40em, thì phần tử con thứ 2 sẽ bị cắt đi nhiều gấp đôi so với phần tử con thứ nhất, làm cho nó trông nhỏ hơn (vì tham số thứ 2, flex-co).
Hỗ trợ trình duyệt
- (hiện đại) có nghĩa là cú pháp gần đây từ đặc tả (ví dụ
display: flex;) - (hybrid) có nghĩa là một cú pháp không chính thức kỳ lạ từ năm 2011 (ví dụ
display: flexbox;:) - (cũ) có nghĩa là cú pháp cũ từ năm 2009 (ví dụ
display: box;)
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (hiện đại) 20- (cũ) | 3.1+ (cũ) | 2-21 (cũ) 22+ (mới) | 12.1+ (hiện đại) | 10+ (kết hợp) | 2.1+ (cũ) | 3.2+ (cũ) |
Trình duyệt Blackberry 10+ hỗ trợ cú pháp mới.
Để biết thêm thông tin về cách kết hợp các cú pháp để nhận được hỗ trợ trình duyệt tốt nhất, vui lòng tham khảo bài viết này (CSS-Tricks) hoặc bài viết này (DevOpera).