由于 IE10 中不支持的“flex-grow”，如何解决这个 flexbox 对齐问题？答案

【问题标题】：How to fix this flexbox alignment issue due to unsupported 'flex-grow' in IE10?由于 IE10 中不支持的“flex-grow”，如何解决这个 flexbox 对齐问题？
【发布时间】：2016-05-20 11:10:18
【问题描述】：

这是 HTML 标记

<div class='container'>
  <li class="options list-unstyled">
    <div class="rank-label">
      <span class="rank theme-inverse-color">1</span>
      <span class="name">AAAAA</span>
      <div class="move-btns">
        <button type="button" class="btn btn-icon btn-up"><span class="icon icon-down">Down</span></button>
        <button type="button" class="btn btn-icon btn-down"><span class="icon icon-up">Up</span></button>
      </div>
    </div>
  </li>
</div>

这里是更少的（css）代码

.square (@size) {
  width: @size;
  height: @size;
}

.options {
  li {
    display: block;
    width: 100%;
    margin-bottom: 5px;
  }
}

.container {
  width: 50%;
  border: 1px solid red;
}

.options {
  font-size: 30px;
}


.text {
  .flex-grow(1);
  .align-items(center);
  .justify-content(center);
}

.inverse-color {
  color: blue;
}

.rank {
  margin: auto;
  padding-top: 2px;
  display: inline-block;
  .align-items(center);
  .justify-content(center);
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  .square(40px);
  min-width: 40px;
  margin-right: 10px;
}

.rank-label {
  .display(flex);
}

.btn {
  margin: 10px;
  border: 1px solid red;
}

.name {
  .display(flex);
  .flex-grow(1);
  .align-items(center);
  padding-right: 30px;
  min-height: 35px;
}

.move-btns {
  .display(flex);
  .flex-basis(auto);
  .flex-shrink(0);
  .flex-grow(0);
  .justify-content(center);
}

所以在 chrome、Safari 和 IE11 等浏览器中，输出看起来完全符合我的预期：

但是在 IE10 中，对齐是关闭的。它不知何故变成了：

数字和文字“AAAAA”都移到了右侧。

我尝试调整flex-grow 和其他参数，但它们没有效果。

我该如何解决这个问题？

这里是codepen.io中代码的链接：http://codepen.io/kongakong/pen/bpygoV

【问题讨论】：

标签： css less flexbox internet-explorer-10

【解决方案1】：

我认为您需要做的就是在您的代码笔 css 设置中打开自动前缀，它就会开始工作。基本上 E10 运行在旧版本的 flexbox 语法上。所以它需要供应商前缀。祝你好运。

【讨论】：

他的codepen代码是全前缀的（见编译版）。
嗨orangeh0g，@Michael_B 是对的。我正在使用这个 github 项目 raw.githubusercontent.com/codio/Flex.less/master/flex.less 来自动添加前缀
我的错误...我看到 flex 语法使用了供应商前缀...基于包含的 flex.less 文件。当我只是使用它并在 IE10 中进行测试时，我看到了相同的报告问题。但是，当我打开 AutoPrefixing 时，问题也会消失并在 IE10 中按预期运行
我要补充一点，您所包含的 flex.less 文件大约有一年的历史，可能已经过时了。 AutoPrefixer 将用于替换该文件。
@orangeh0g 这是github.com/postcss/autoprefixer 你指的自动前缀吗？

【解决方案2】：

感谢@orangeh0g 的回答，我在我的codepen 代码中检查了autoprefixer 生成的css。我发现我只需要添加

 -ms-flex-positive: 1;

到text css 类，错位将被修复。

【讨论】：