Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
mrx3
8,742 PointsI'm completely lost with flex-box. (codepen included).
I decided to start practicing flex-box, but I seem to be having some trouble. I added display flex to the .wrapper class. That is my highest parent on the page besides the html, and the body. Now if I added the display flex to my wrapper shouldn't all the children below wrapper be child elements that will now be flex items. The reason I ask about the child elements being flex items, is because I tried to style my nav without using display flex as I currently have in my codepen, but the styles I was using had no effect until I added display flex to the nav. Go ahead and remove the display flex from the nav, and try to style it with something. It won't work, for me anyway. My question is, do I have to add display flex to every parent to style the page with flex-box properties, or have I done something wrong?
Codepen: http://codepen.io/mike316/pen/jPNRmp
2 Answers
Preston Skaggs
11,818 PointsThe flex property only applies to direct children of the parent. So yes, you need to add the display: flex property to your nav and any other parent elements where you want the direct children to be flexible boxes.
Here's a good reference. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
mrx3
8,742 PointsThank you for your help. I will try that.
mrx3
8,742 Pointsmrx3
8,742 PointsThanks that's the link I'm currently using for practice. Okay I have one more question. When I try to use justify-content: space-between, or space-around for my nav it doesn't work. Can you explain to me why that doesn't. And thanks again for your help Preston.
Preston Skaggs
11,818 PointsPreston Skaggs
11,818 PointsSo, instead of adding display: flex to your nav property try adding it to the ul that is in the nav. The flex box model should be applied to all of your list items then.
Ryan Field
Courses Plus Student 21,242 PointsRyan Field
Courses Plus Student 21,242 PointsYou have declared
display: flex;on the nav element itself, but inside the nav you have aul, which is treated as a single element regardless of the list items inside of it. If you want thelielements to have space between them, you need to declaredisplay: flex;on theulinstead.