This will be everything from the hours and phone number to these links, and then also the address. We're not going to have the logo here later. We're going to save that for a guide that talks specifically about how we can use images in HTML.

Whenever you have something like this that you want to build out, and you have a three column layout. Right here you can see. You can kind of visualize that each one of these elements is represented and contained inside of a column.

Years ago if you wanted to implement something like this, this took quite a bit of work. Thankfully because of the skill that we're going to learn in this guide with Flexbox, this is going to be a relatively straightforward system to build out.

Let's switch back to our code here and then open up the text editor. What we're going to do is we're going to start at the very top of the chain here. You can see that we have this div and then inside of it, that's where all of the navigation elements are.

You can see we even put that comment there. Well, just like we did before, I'm going to get rid of the comment and instead, I'm going to give it a class. This is going to have class="navigation-wrapper".

Now let's come down into the styles.css, and at the very top here, I am going to add a comment. You can see the comments in CSS have a little bit different syntax where it's the /* */, then whatever you want to put inside of it.

Here, I'm just going to say, "Common nav styles", and the reason why I'm doing that, it doesn't have anything to do with code. It's just so that later on when we want to reference this, we'll know exactly where the nav styles are.

Right here, I'm going to start by adding styles to the navigation wrapper. Inside of here, I first want to establish a height. Right now, the height is going to be determined by the content and I don't really want that.

If you look at the end goal, you can see that this has a predetermined height right here. Let's come over and let's add that height. We're going to use a height attribute, and the value's going to be 190px.

styles.css

.navigation-wrapper {
    height: 190px;
}

If you're not familiar with what a pixel is, it's pretty much what every kind of screen out there, every image, anything digital is made up of pixels. If you're looking at an image, is a great example, and you want to zoom in. If you can zoom in all the way to the pixel level, you'll see that that image is made up of squares.

What a pixel does is it is a unit of measure. Right here you'll see what we're going to do, is we're saying that we want 190 of those little squares, and that is what the height's value is going to be.

If you're coming from a non-coding background and you're just used to working with inches or millimeters or anything like that, a pixel is essentially the digital version of that unit of measure.

Now that we have a height, let's also add a background-color. So I'm going to say, background-color. Up until now, we've used these nice little names, and these are some built-in colors provided by CSS. We also have a few other options and we're going to talk about those throughout the rest of the course.

If you start off your color with a #, what this means is that you can give a hexadecimal value. I'm going to say #11122B. What this is going to give us is a nice dark blue color. That's going to be the background color.

Now, we also want to have a color for the text and so whenever you want to have a background color, the attribute name is going to be background-color.

Whenever you just say color, that is referring to the text. Here I'm going to give another # value and it's going to be #CBCBCB, just like that, and that will give us a light gray color.

styles.css

.navigation-wrapper {
    height: 190px;
    background-color: #11122b;
    color: #cbcbcb;
}

Let's hit save, and just see what that's given us so far. There you go. You can see that we now have that dark blue color, and you may also notice that we have some white around the edges. I'll show you how to fix that because we want our background just like this to be able to be nice and flush.

We're not going to worry about that right now. We'll do that later on. Now that we have that, we're going to get into using Flexbox. What Flexbox is, is it's built directly into CSS. You don't have to install anything or import any libraries or anything like that.

You can just use it if you're building CSS code. What it allows you to do is to align items on the page in a much easier fashion than before. If you were to see the way that we had to align items back 10, 15 years ago, it was really not fun.

You had to get a little bit tricky with how you arranged everything on the page, but with tools like Flexbox and CSS grid, it gives you a really nice way of organizing and aligning items.

Now, anytime that you want to have Flexbox used, the first thing that you need to do is type display, and then just say display: flex. That means that this navigation wrapper is now going to be what is called a Flexbox container.

I'm going to add a comment just right above here and say this is now making this a "Flexbox container". Don't worry about what this word means. We're going to talk about it, but it's a very important piece of terminology.

We have Flexbox containers and we have Flexbox items. As soon as you understand the difference between the two and how they work together, everything in Flexbox and how you can arrange items on the page is going to make a lot more sense.

Right here, we have now, because we've said display: flex, we've made the navigation-wrapper a Flexbox container. Let's also add a few Flexbox rules, so I'm going to say justify-content:. Let's make this one space-between and I'll talk about what that represents here in a second, and then align-items: center.

styles.css

.navigation-wrapper {
    height: 190px;
    background-color: #11122b;
    color: #cbcbcb;
    /* Flexbox container */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

For right now, let's keep it just with that. We'll add a few more things here shortly. If you hit refresh, you can see that that has now got us a little bit closer to our goal. Now obviously, we still have long ways to go before it looks like this.

However, by using Flexbox you see how we were able to arrange the items on the page exactly where we wanted them. This is critical for understanding the way that the process works. What Flexbox does is we have made this entire unit here, so this entire nav bar is now a Flexbox container.

All of the items inside of it. So each div becomes a Flexbox item. The way that it works is we have now one container, and then we have three items inside of it. Let's look at the HTML code, and I'll close styles off here.

What this did is navigation-wrapper, when it became a Flexbox container, automatically with the way Flexbox works, is it took each element inside. It took this div of contact-hours-wrapper, then it took the link-wrapper, and then it took the address-wrapper and it made those all Flexbox items automatically.

Now, the way that Flexbox works is this is not a deep nested relationship. What I mean by that is that it only looks one level deep. So the nav-links, so each one of these links, are not Flexbox items.

We're actually going to use another tool for that later on. All that Flexbox does is it looks at the very next level. If you think I'm going and I'm kind of repeating myself here a little bit, I am because this part is so important.

When I was learning how Flexbox works, it didn't really click for me until I understood this one process: that there is a parent-child relationship where you have this container element and then, however many items are inside, those are the elements. Those are the Flexbox items.

I just want to show you this one more time. If I add another address here, the way it works is if you come back here and hit refresh, you see how it got added automatically here to the right-hand side.

The way it works is you have the first element, the second element, the third, and then the fourth. Then to go kind of line by line, we'll open up styles.css. We gave our height, we gave our background-color and our color.

Then inside our Flexbox rules, we displayed flex, which made this a Flexbox container. Then from there, what we did is we said, justify-content. Let's talk about this. What justify-content does is it tells the elements inside how to behave.

It says if you want to do space-between, which is what we did, that means that the way they're going to be separated is by the space. All of the potential space between them. In this case, it is going to go all the way from side to side, and then they're going to be separated by whatever available space that they have in between each one of those items.

That space is flexible. If you were to come back here to index.html and let's add a few more of these, hit save, come hit refresh. Now, do you see how the space in between has shrunk?

What that means is with space-between, it just is going to allow for any of the available open space to be used. You can see here in the final version, this is exactly what we have going on. Where we have the space-between has all of this open area.

If we were to pop this open in a new browser window and shrink it, watch what happens. Do you see how the space shrinks depending on the size of the window? That's the way it works. It is not a hard-coded value.

There are ways of doing hardcoded ones. If you do need the space to remain there, but in our case, I want this to be flexible. That's giving us exactly what we're looking for right there. Let's come and let's get rid of the addresses that we don't need. Hit save, hit refresh, and we're back to where we wanna be. That is how justify-content works.

Now if you come down here, you can see that we also have align-items. The way align-items works, if justify content provides us the ability to tell Flexbox how we want these items to be aligned, what align-items does is it says how they should be aligned vertically.

When we said align-items: center, what we're saying is I want these items to be arranged at the very centermost part of that div element. That is going to be the way that they work. That's the way we want them to be because we want these to be centered.

If you wanted them to be at the top, then we would change this rule and we would say align-items: flex-start. Now, if you hit refresh, you can see that is at the top and let's also use these tools right here.

Let's use the browser tools. You can see we have align-items here. If we wanted to say flex end, you can see they go down to the bottom.

I'm going to go back to center. This is where we want them to be. Now, we also could play with justify-content. If you want to see some of the other options here, you have space-between. you also have center. If you wanted all of the items aligned perfectly in the center, then you could use the center rule.

Now, you could use flex-end and they would all be at the right-hand side, flex-start and they'd all be on the left-hand side. You can also do space-around. You can see our space-around places all of the items here. It takes open space on the left-hand side, open space between the elements, and then open space on the right-hand side.

Now, I did contemplate using this. This would work for a number of situations, but later on, I'm going to show you, actually in the next guide, how we can hardcode some values. Because I would like to have some open values here.

I don't wanna use space-around on that side. I'd rather the middle be flexible, and then us to have enough open area here on the right and left-hand side, just to make sure that we always have kind of that symmetrical look.

I don't care about this space, but I do care about the space on the right and left-hand side. So with all of that being said, great job. If you went through that, you now know how to implement a Flexbox container and how to align the items inside of it.