Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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:

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.

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:

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

I get it now. Appreciate it!