由于 IE10 不支持 'flex-grow'，如何解决此 flexbox 对齐问题？

Question

这是 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中代码的link：http://codepen.io/kongakong/pen/bpygoV

Answer 1

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

Answer 2

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

 -ms-flex-positive: 1;

到textcssclass，错位将被修复。

由于 IE10 不支持 'flex-grow'，如何解决此 flexbox 对齐问题？

How to fix this flexbox alignment issue due to unsupported 'flex-grow' in IE10?

css

less

flexbox

internet-explorer-10