Flex: 1 là gì
Đây là lời giải thích: https://www.w3.org/TR/css-flexbox-1/#flex-common flex: 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ẬNTrong 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).
Đ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ÍCHCầ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 đủ:
CẬP NHẬT 2019Cá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. Video liên quan |