是否有用于将 css flex 速记转换为手写以支持 IE11 的填充代码?

Question

是否有用于将 Flexboxflex：速记属性转换为其可比较的手写属性以支持 IE11 的填充物？

在做了一些研究之后，我发现了一些弹性框填充物，但没有一个支持flex：速记属性。

如果没有支持 flex 速记的 polyfill，我将不得不手动将它们全部替换为速记版本。

任何建议将不胜感激！

目前，我创建了这个mixin来提供回退：

/*
Mixin for IE11 fallback for shorthand flex property.
EXAMPLE USAGE:
.grid {
flex: 1 0 100%; // todo: replace this with below
}
.grid {
@include flexIEFallback(1 0 100%);
}
OUTPUT:
.grid {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100%;
}
*/
@mixin flexIEFallback($flex-list) {
// this is the shorthand
//  flex: $flex-list;
// IE11 fallback for shorthand prop flex
@if length($flex-list) == 1 {
@if $flex-list == (auto) {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
@if $flex-list == (initial) {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
@if $flex-list == (none) {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
@if $flex-list == (unset) {
flex-grow: unset;
flex-shrink: unset;
flex-basis: unset;
}
@if $flex-list == (inherit) {
flex-grow: inherit;
flex-shrink: inherit;
flex-basis: inherit;
} @else {
flex-grow: $flex-list;
}
}
@if length($flex-list) > 1 {
@for $item from 1 through length($flex-list) {
$index: index($flex-list, $item);
@if $index == 1 {
flex-grow: $item;
}
@if $index == 2 {
flex-shrink: $item;
}
@if $index == 3 {
flex-basis: $item;
}
}
}
}

Answer 1

看看这个小马填充，而不是走 polyfill 路线。

https://github.com/jhildenbiddle/css-vars-ponyfill

自从添加您的示例以来，它可能不符合您的确切需求，但我之前曾将其用于类似情况，以允许为 css 类定义速记属性并保持与不支持 css 速记语法的旧浏览器的兼容性。