-
Create a flexbox container:
.container { display: flex; }
-
Use a wildcard child selector to set
flex: auto
on all container items..container > * { flex: auto; }
This is the same as setting
flex: 1 1 auto
, which tells theli
elements to grow and distribute extra space equally among each item.
Standard html navigation menu:
<nav>
<ul class="container">
<li><a href="#">Fighter</a></li>
<li><a href="#">Wizard</a></li>
<li><a href="#">Bard</a></li>
<li><a href="#">Rogue</a></li>
</ul>
</nav>
- HTML
- CSS Selectors:
- MDN: Child selector
- Flexbox:
- MDN: Flexbox basics
- Reference: Complete Guide to Flexbox
- Reference:
flex
property