Hi,
ich wollte 3 columns mittig machen, jedoch funktoniert es nicht bei safari aber bei allen anderen browsern schon. Hab ich was vergessen oder geht das allgemein nicht?
Bild in Safari:
Bild in Chrome :
HTML:
HTML
<nav class="border-bottom" role="navigation">
<section class="flex-three-col-items">
<section class="flex-col title-col">
<h1>Testpage</h1>
</section>
<section class="flex-col nav-col">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Was tun wir?</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Support</a></li>
</ul>
</section>
<section class="flex-col log-col">
<span class="log-modal">Login</span> | <a href="#">Anmelden</a>
</section>
</section>
</nav>
Alles anzeigen
CSS:
CSS
nav section.flex-three-col-items {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
width:100%;
justify-content:space-around;
align-items: center;
justify-content: center;
-webkit-align-items: center;
-webkit-justify-content: center;
}
nav section.flex-col {
flex-basis:30%;
}
Alles anzeigen