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

CSS

Posted by Gabriel Ward
Gabriel Ward
20,222 Points

Flexbox

I'm under the impression that flexbox automatically puts things into a row. Here's my code, but it's not going into a row like I was expecting it would.

<nav class='wrapper'>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
            </ul>
        </nav>

wrapper {
    display: flex;
    background: red;
}

Trying to work out why, but not sure what the problem is.

1 Answer

Andrew K
Andrew K
13,774 Points
Andrew K
Andrew K
13,774 Points

Hi Gabriel, It might just be a typo in your code here, but you do need to use a period for your class selector.

But the real problem here is that you need to work with two separate rule sets, one for the flex container, and one for your flex items. Here, your container should be your ul, and your items would be your li. Then you need to set the flex-grow property of your items. For instance:

ul {
    display: flex;

}

ul li {
    flex-grow: 1;
}

So you set up a flex context for your container, and then adjust how they fill the space within the flex item rule.

That might help you out.