Core Code
Core Code Modern Dev Handbook

Flexbox Navbar

Flexbox is commonly used for navigation bars.

Preview

Code

<style>
.nav{
display:flex;
justify-content:space-between;
background:#111827;
padding:10px;
color:white;
}

.links{
display:flex;
gap:15px;
}
</style>

<div class="nav">
<div>Logo</div>
<div class="links">
<span>Home</span>
<span>About</span>
<span>Contact</span>
</div>
</div>

More Flexbox Intro Examples (8)

example Basic Flex Container open example example Flex Row Direction open example example Flex Column Direction open example example Center Items with Flexbox open example example Space Between Items open example example Equal Flex Columns open example example Flexbox Card Layout open example example Flexbox Axis Demo open example