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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -