navigation - flexbox not working in firefox -
the below flexbox code doesn't work in firefox. it's horizontal nav list stretches across browser width. in other browsers li's space out equally, in firefox don't. ideas? in advance.
.wrapper { position: fixed; padding: 0; width: 100%; top: 0em; } .flex-container-top { padding: 1em; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .flex-item { font-family: sans-serif; font-size: 1em; color: #fff; text-align: center; }
<div class="wrapper"> <ul class="flex-container-top"> <li class="flex-item"><a href="#eastsidedin">link 1</a> </li> <li class="flex-item"><a href="#eastsidedes">link 2</a> </li> <li class="flex-item"><a href="#eastsidedri">link 3</a> </li> <li class="flex-item"><a href="#eastsidehap">link 4</a> </li> </ul> </div>
your example didn't work in chrome, either.
you need add flex: 1
.flex-item
. work:
.flex-item { flex: 1; /* add line */ font-family: sans-serif; font-size: 1em; color: #fff; text-align: center; }
Comments
Post a Comment