Menu
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).
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.
As you can see, the prefix is added for IE10.
Is anyone able to tell me where I am going wrong here?
https://codepen.io/anon/pen/EWqvNv
Here is the 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;
}
255
As IE11 is quite buggy, so if to remove the justify-content: flex-end;, it will work as intended
Updated codepen
.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-content defaults to flex-start), I would use margin-left: auto on the nav-toggle instead, sample codepen
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
