-
Create a flexbox container:
.container { display: flex; }
-
Use
justify-content
to control how items are horizontally positioned (when inrow
direction):Centre items within container:
.container { justify-content: center; }
OR, pack items toward the end of the flex-direction:
.container { justify-content: flex-end; }
OR, distribute items evenly on the line; first item is on the start line, last item on the end line:
.container { justify-content: space-between; }
OR, distribute items on the line with equal space around them:
.container { justify-content: space-around; }
OR, distribute items so that the spacing between any two items (and the space to the edges) is equal:
.container { justify-content: space-evenly; }
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:
- Flexbox:
- MDN: Flexbox basics
- MDN: justify-content
- Reference: Complete Guide to Flexbox