Create a navbar with CSS flexbox
Tags: beginners, codenewbie, css, 100daysofcode
Published: 2020-11-08 21:19:36

#**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**
```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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9v6l52hwgx8ilq2um3ms.jpg)

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**
```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**
```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;
}
```

{% codepen https://codepen.io/jungjungie/pen/LYZgGBy %}

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*