CSS IE11 中的 Flexbox 对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43317202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox alignment in IE11
提问by ccdavies
In the attached Codepen, you will see that I am using Flexbox to align the Logo and Menu icons in the header. The logo should be aligned left, the menu icon right. (I have other elements but this is just a simplified version for demonstration).
在随附的 Codepen 中，您将看到我正在使用 Flexbox 对齐标题中的徽标和菜单图标。标志应左对齐，菜单图标右对齐。（我还有其他元素，但这只是演示的简化版本）。
When testing in IE11, I see that the Flexbox isn't working. As far as I can tell via the documentation, IE11 should be supporting this. I have other Flexbox elements, which are also not working.
在 IE11 中进行测试时，我发现 Flexbox 无法正常工作。据我所知，IE11 应该支持这一点。我还有其他 Flexbox 元素，它们也不起作用。
As you can see, the prefix is added for IE10.
如您所见，为 IE10 添加了前缀。
Is anyone able to tell me where I am going wrong here?
有没有人能告诉我我哪里出错了？
https://codepen.io/anon/pen/EWqvNv
https://codepen.io/anon/pen/EWqvNv
Here is the CSS:
这是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;
}
回答by Ason
As IE11 is quite buggy, so if to remove the justify-content: flex-end;, it will work as intended
由于 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;
}<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>Side note:
边注：
Based on the above left-to-right flow (omitted justify-contentdefaults to flex-start), I would use margin-left: autoon the nav-toggleinstead, sample codepen
基于上述左到右流量（省略justify-content默认为flex-start），我会用margin-left: auto在nav-toggle相反，样品codepen
回答by redOctober13
Setting justify-content: space-betweenseems to work; why not use that?
设置justify-content: space-between似乎有效；为什么不使用它？
回答by Jarek
I'm Sorry but if you look at https://caniuse.com/#search=justify-contentit's clear that IE doesn't support this method. To fixed that problem on IE you can use extra css like so:
很抱歉，但如果您查看https://caniuse.com/#search=justify-content，很明显 IE 不支持此方法。要在 IE 上解决该问题，您可以使用额外的 css，如下所示：
.container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
@supports(justify-content: space-between) {
-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;
width: 100px;
height: 50px;
background: #000;
}
.nav-toggle {
position: absolute;
right: 0;
top: 0;
@supports(justify-content: space-between) {
position: unset;
}
}<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>