What is CSS Flexbox?
Flexbox is a web layout model that allows you to create a responsive user interface, meaning that it can adapt to different screen sizes. It uses rows and columns to structure elements.
If you're creating a navbar from scratch, CSS flexbox can be a good option to try out.
HTML
<body>
<!-- Navbar -->
<header>
<h1 id="nav-title">DEV.TO</h1>
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
Here, our HTML code here uses an unordered list <ul> to list out our nav items. You can see that there's not much to our navbar just yet.
With CSS flexbox, we can format and make this much more appealing!
Quick Tip!
Before we jump into flexbox, a quick tip to format your unordered list. The CSS code below will organize your nav items into a row by using display: inline-block and take away those unnecessary bullet points with list-style: none.
CSS
header li {
list-style: none;
display: inline-block;
padding: 0 20px;
}
Apply Flexbox to Your Navbar
To use flexbox, add the display: flex CSS property to an element. This should be applied to the parent element wrapped around whatever you are trying to structure. In our case, it's the <header>.
By default, flexbox will structure your elements into a row, but you can tell it to use columns by adding flex-direction: column. For our navbar, we'll use the default since we want it to spread horizontally across our page.
Now to align our items, we can start by shifting everything to the right. To do this, apply justify-content: flex-end to your header.
If you're doing this step by step, you may notice that this also pushes your <h1> title to the right. We can easily fix this by giving the <h1> a CSS property of margin-right: auto, which tells it to automatically fill in any empty space to the right of it.
And that's pretty much it! This should give you the basic layout to start off with for your navbar. Everything else is just adding other styling elements like margin, padding, colors, etc. to make it more visually appealing. See below for an example.
CSS
/* Global */
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica;
}
/* Header */
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 20px 50px;
box-shadow: 0 1px 8px #ddd;
}
#nav-title {
margin-right: auto;
font-size: 1.5em;
}
header li {
list-style: none;
display: inline-block;
padding: 0 20px;
}
header a {
text-decoration: none;
color: #555;
transition: all 0.3s ease 0s;
}
header a:hover {
color: #b2dfdb;
}
If you want to dive deeper into flexbox and see what it can do, here's a great resource! https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Day 7 of #100DaysofCode
Top comments (3)
Since the header only has two direct child elements and you want one of them to go to the left edge and the other one to the right edge (and since this is a flexbox article), wouldn't it make more sense to just add
justify-content: space-betweeninstead of playing with the margin?
You're right! That's probably simpler.
thank you!