Đây là lời giải thích:
//www.w3.org/TR/css-flexbox-1/#flex-common
flex:
[.___ Nếu tất cả các mục trong thùng chứa flex sử dụng mẫu này, kích thước của chúng sẽ tỷ lệ thuận với hệ số uốn được chỉ định.
Do đó, flex:1 tương đương với flex: 1 1 0
flex: 1 có nghĩa như sau:flex-grow : 1; // this means that the div will grow in same proportion as the window-size flex-shrink : 1; // this means that the div will shrink in same proportion as the window-size flex-basis : 0; // this means that the div does not have a starting value as such and will take up screen as per the screen size available for.e.g:- if 3 divs are in the wrapper then each div will take 33%.
HÃY CẨN THẬN
Trong một số trình duyệt:
flex:1; không bằng flex:1 1 0;
flex:1; = flex:1 1 0n; [trong đó n là một đơn vị độ dài].
- flex-grow: Một số chỉ định mục sẽ tăng bao nhiêu so với phần còn lại của các mục linh hoạt.
- flex-co lại Một số chỉ định số lượng vật phẩm sẽ co lại so với phần còn lại của các mặt hàng linh hoạt
- flex-cơ sở Độ dài của vật phẩm. Giá trị pháp lý: "tự động", "kế thừa" hoặc một số theo sau là "%", "px", "em" hoặc bất kỳ đơn vị độ dài nào khác.
Điểm mấu chốt ở đây là cơ sở flex yêu cầu đơn vị độ dài .
Trong Chrome chẳng hạn flex:1 và flex:1 1 0 tạo ra các kết quả khác nhau. Trong hầu hết các trường hợp, có vẻ như flex:1 1 0; đang hoạt động nhưng hãy xem xét điều gì thực sự xảy ra:
THÍ DỤ
Cơ sở flex bị bỏ qua và chỉ áp dụng flex-grow và flex-co.
flex:1 1 0; = flex:1 1; = flex:1;
Điều này thoạt nhìn có vẻ ổn, tuy nhiên nếu đơn vị áp dụng của container được lồng nhau; sẵn sàng cho những chuyện bất ngờ!
Hãy thử ví dụ này trong CHROME .Wrap{ padding:10px; background: #333; } .Flex110x, .Flex1, .Flex110, .Wrap { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } .Flex110 { -webkit-flex: 1 1 0; flex: 1 1 0; } .Flex1 { -webkit-flex: 1; flex: 1; } .Flex110x{ -webkit-flex: 1 1 0%; flex: 1 1 0%; }FLEX 1 1 0
TƯƠNG THÍCH
Cần lưu ý rằng điều này không thành công vì một số trình duyệt đã không tuân thủ đặc điểm kỹ thuật .
Các trình duyệt sử dụng thông số kỹ thuật flex đầy đủ:
- Firefox -
- Cạnh - [Tôi biết, tôi cũng bị sốc.]
- Chrome - x
- Dũng cảm - x
- Opera - x
- IE - [lol, nó hoạt động không có đơn vị độ dài nhưng không có đơn vị.]
CẬP NHẬT 2019
Các phiên bản mới nhất của Chrome dường như cuối cùng đã khắc phục được sự cố này nhưng các trình duyệt khác vẫn chưa có.
Đã thử nghiệm và hoạt động trong Chrome Ver 74.