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.
John Lukacs
26,210 Pointsflexbox
@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
Courses Plus Student 21,241 PointsOkay, 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
26,210 PointsIts stacking the list items why is this
Ryan Field
Courses Plus Student 21,241 PointsHi, 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
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
26,210 PointsHa it worked like a charm. Thanks for helping me out on this one. Now my day can go on.
Ryan Field
Courses Plus Student 21,241 PointsYou're very welcome. :D
John Lukacs
26,210 PointsHi! Do you have any idea how to align links to the right my margin right: auto is not working.
Ryan Field
Courses Plus Student 21,241 PointsYou could try text-align: right; and see if that gets what you're trying to do.
John Lukacs
26,210 Points.logo:first-child {
margin-right: auto;
}
John Lukacs
26,210 PointsThe margin will take a interger value such as 50 px
John Lukacs
26,210 PointsNo and I tried justify-content: flex-end. I don't like flex box
Ryan Field
Courses Plus Student 21,241 PointsAww, 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
26,210 PointsTHe logo is in the list items. Im not wanting to align that what was your idea
Ryan Field
Courses Plus Student 21,241 PointsIf 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
26,210 Pointsul {
display:flex;
justify-content: flex-end;
}
Its not doing what its aspose to do even with this code
Ryan Field
Courses Plus Student 21,241 PointsIt should align the items to the right, like you can see in this pen.
John Lukacs
26,210 PointsIt seems if you specify display: flex in multiple selectors the poperties like justify content don't work.
Ryan Field
Courses Plus Student 21,241 PointsYou 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.