是否有一个polyfill用于将CSS flex的简写形式转换为正写形式，以支持IE11？

Question

是否存在用于将Flexbox flex：速记属性转换为可比较的速记属性以支持IE11的polyfill？

经过一些研究，我发现了一些flexbox polyfill，但是它们都不支持flex：shorthand属性。

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

任何建议，我们将不胜感激！

目前，我创建了此混入以提供备用：

/*

 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