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

John Lukacs
John Lukacs
26,210 Points

flexbox

@charset "UTF-8";
/* CSS Document */
ul li {
list-style:none;
color: white;
text-decoration:none;
text-align:center;
padding: 5px 15px;
    background-color: #2ED39C;
    margin: 5px 15px;
}
.main-header {
background-color: #000000;  
}
.logo a {
font-size: 36px;    

color: #9764E6;
text-decoration: none;
}
.main-nav {
    display:flex;
align-self:center;
height:100%;
flex-direction:row;
}
.logo:visted
{
color#C30F12;   
}

Anybody know why my flexbox is not working.

12 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,241 Points

Okay, so what's going on here is that you are adding display: flex; to the nav element, but I'm assuming you want the li elements to line up horizontally. It may seem strange, but a ul is actually a container, and since flex display only applies to the first children of a flex container, it is trying to line up the ul horizontally (which it is doing). If you switch the main-nav class to the ul, it should appear how you want it to.

Just a few other notes, you have some syntax errors in the last declaration in your CSS.

This:

.logo:visted
{
color#C30F12;   
}

should be this:

.logo:visited
{
color: #C30F12;   
}

Hope that helps! :)

John Lukacs
John Lukacs
26,210 Points

Its stacking the list items why is this

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,241 Points

Hi, John. It's hard to tell without seeing your HTML as well what's going on. However, flexbox involves declarations for both the parent container and the child elements that you are trying to align. When I get stuck, I always refer CSS Tricks' flexbox guide. You can take a look there and if you still can't figure it out, post your HTML and we'll try and help you out! :)

John Lukacs
John Lukacs
26,210 Points
<body>
<header class="main-header">
<nav class="main-nav">
<ul><li class="logo"><a href="#">logo</a></li>
<li><a href="#">nav 1</a></li>
<li><a href="#">nav 2</a></li>
<li><a href="#">nav 3</a></li>
<li><a href="#"> nav4 4</a> </li>
</ul>
</nav>
</header>
</body>
</html>

Ryan Hi I added flex to all children lists and anchor it did not work they are still stacked blocks

John Lukacs
John Lukacs
26,210 Points

Ha it worked like a charm. Thanks for helping me out on this one. Now my day can go on.

John Lukacs
John Lukacs
26,210 Points

Hi! Do you have any idea how to align links to the right my margin right: auto is not working.

Ryan Field
Ryan Field
Courses Plus Student 21,241 Points

You could try text-align: right; and see if that gets what you're trying to do.

John Lukacs
John Lukacs
26,210 Points
.logo:first-child {
    margin-right: auto;

}
John Lukacs
John Lukacs
26,210 Points

The margin will take a interger value such as 50 px

John Lukacs
John Lukacs
26,210 Points

No and I tried justify-content: flex-end. I don't like flex box

Ryan Field
Ryan Field
Courses Plus Student 21,241 Points

Aww, it's great once you get to know it better! ;) Is it just the li elements that you're trying to align to the right?

John Lukacs
John Lukacs
26,210 Points

THe logo is in the list items. Im not wanting to align that what was your idea

Ryan Field
Ryan Field
Courses Plus Student 21,241 Points

If you want to have the logo justified left and the menu items on the right, you may need to take the logo out of your list. Then, you should be able to put justify-content: flex-end on the ul and have the nav items appear on the right.

John Lukacs
John Lukacs
26,210 Points
ul {
display:flex;
justify-content: flex-end;

}

Its not doing what its aspose to do even with this code

Ryan Field
Ryan Field
Courses Plus Student 21,241 Points

It should align the items to the right, like you can see in this pen.

John Lukacs
John Lukacs
26,210 Points

It seems if you specify display: flex in multiple selectors the poperties like justify content don't work.

Ryan Field
Ryan Field
Courses Plus Student 21,241 Points

You only have to use display: flex; on the parent element, but there are other declarations you can make on the children elements, as outlined in the cheat sheet that I linked above.