CSS CSS Flexbox Layout Building a Layout with Flexbox Building a Navigation Bar with Flexbox

Kirt Perez
Kirt Perez
4,825 Points

When using justify-content in this example, I don't understand how the h1 element and unordered list created a huge gap

How did the unordered list end up sticking all the way to the right?

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Kirt Perez! That's what "space-between" does. It pushes everything to the ends. The first element gets pushed all the way to the left and the second element gets pushed all the way to the right. Besides "space-between", there's also "space-around", "space-evenly", "center", and "start". I'd suggest taking a look at the justify-content documentation which has a very good demonstration of all of them :smiley:

Hope this helps! :sparkles:

Kirt Perez
Kirt Perez
4,825 Points

What is considered an element in your reply? The h1 and unordered list? I initially thought that the navigation would still be closer to the site name but just have the spaces in between them that are equal. So if there is two elements using this property, one will stick to the start and one to the end?

Also, I don't understand how we had to use display: flex; twice, on .main-header and .main-nav. If it were just one flex value on the .main-header class, wouldn't .main-header already make the child elements have the flex property already?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Kirt Perez yes, the h1 is one element and the ul is another element. Both the main-header and the main-nav are now flex containers. So when we're setting the justify-content on "main-header" we're talking about justifying its direct children. The only direct children of "main-header" is that h1 and the "main-nav" nav element.

Kirt Perez
Kirt Perez
4,825 Points

One more question, if I were to use justify content on the .main-nav container, would it work? I'm trying to play around with the property using different values but it seems like nothing is changing.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi again, Kirt Perez! Yes, you totally could add a justify-content to the "main-nav", but the problem with that is that the <ul> itself isn't very wide which means there's not a lot of room to shift around horizontally. It's a little like when you were a kid shaking presents trying to figure out what's inside. If there's a lot of extra room, you notice stuff rattling. If there's no extra room, you hear nothing when you shake it.

However, if you added this to main-nav you'd see a much different result. Again, this will work on the direct children of that main-nav which are the list items:

.main-nav {
  flex-direction: column-reverse;
}

Give it a whirl :dizzy: :sparkles:

Kirt Perez
Kirt Perez
4,825 Points

Thanks again! I now understand more than I did before this post!

Kirt Perez
Kirt Perez
4,825 Points

I get it now. Appreciate it!