IE11 中的 Flexbox 对齐

Question

IE11 中的 Flexbox 对齐

ccd*_*ies 3 css internet-explorer flexbox

在随附的 Codepen 中，您将看到我正在使用 Flexbox 对齐标题中的徽标和菜单图标。标志应左对齐，菜单图标右对齐。（我还有其他元素，但这只是演示的简化版本）。

在 IE11 中进行测试时，我发现 Flexbox 无法正常工作。据我所知，IE11 应该支持这一点。我还有其他 Flexbox 元素，它们也不起作用。

如您所见，为 IE10 添加了前缀。

有没有人能告诉我我哪里出错了？

https://codepen.io/anon/pen/EWqvNv

这是CSS：

.container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}           

.nav-logo {
    margin-right: auto; 
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

LGS*_*Son 7

由于 IE11 有很多问题，所以如果删除justify-content: flex-end;，它将按预期工作

更新代码笔

.container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.nav-logo {
  margin-right: auto;
  width: 100px;
  height: 50px;
  background: #000;
}

Run Code Online (Sandbox Code Playgroud)

<html>

<head></head>

<body>

  <header>

    <div class="container">

      <a class="nav-logo" href=""></a>

      <a class="nav-toggle" href="#">Menu</a>

    </div>

  </header>

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

边注：

基于上述左到右流量（省略justify-content默认为flex-start），我会用margin-left: auto在nav-toggle相反，样品codepen

归档时间：	8 年，8 月前
查看次数：	32061 次
最近记录：	7 年，2 月前