问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

IE11中的Flexbox对齐

社区维基
1
新手上路，请多包涵

在随附的 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;
}

原文由 ccdavies 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译cssinternet-explorerflexbox
阅读 505
1 个回答
得票最新
社区维基
1
✓ 已被采纳

由于 IE11 有很多 bug，所以如果删除 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;
}

 <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>

边注：

Based on the above left-to-right flow (omitted justify-content defaults to flex-start ), I would use margin-left: auto on the nav-toggle instead , 示例代码笔

原文由 Asons 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题