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 CSS Flexbox Layout Understanding Flexbox Creating a Flex Container

Posted by Kenneth Thomas
.a{fill-rule:evenodd;}techdegree
Kenneth Thomas
Front End Web Development Techdegree Student 7,891 Points

Am I missing something when it comes to flex containers?

In Guils video on flexbox containers, it seems that if you add display:flex; to a container with CSS it will automatically display horizontally. It worked in workspace for me but not on a personal project I am working on. HTML CSS <div class="pizza"> .pizza { <ul> display: flex; <li>Cheese</li> } <li> Pepperoni</li> </ul> </div>

Shouldn't the list items be side by side and no longer stacked on top of each other?

Kenneth Thomas
.a{fill-rule:evenodd;}techdegree
Kenneth Thomas
Front End Web Development Techdegree Student 7,891 Points

HTML <div class="pizza"> <ul> <li>Cheese</li> <li> Pepperoni</li> </ul> </div>

CSS .pizza { display: flex; }

2 Answers

Denis Omerović
.a{fill-rule:evenodd;}techdegree
Denis Omerović
Full Stack JavaScript Techdegree Student 2,607 Points

When you set display: flex; it only gonna affect direct children of that container, so in your case <li> items are not direct children of the container. So you should set <ul> display: flex; and then li items become direct children and they will display horizontally. In your case div with class pizza is container so only direct child is ul.

Robert O'Toole
Robert O'Toole
6,366 Points
Robert O'Toole
Robert O'Toole
6,366 Points

omfg thank u dude.... this just EXPLAINED EVERYTHING

Jon Myzzle
Jon Myzzle
6,279 Points
Jon Myzzle
Jon Myzzle
6,279 Points

Hello there Kenneth, The above i believe only makes the element a block element, which means the element as a whole displays on its own line versus the specific items you want to appear as "inline" block elements.

After playing around with some code, i think i may have been able to produce what you are looking for:

HTML

<div class="pizza">
  <ul>
    <li>cheese</li>
    <li>pepperoni</li>
  </ul>
</div>

CSS

.pizza li {
  display: inline-flex;
}

MDN is an excellent resource i've been using quite a bit! The attached link is a resource that links directly to an additional CSS Flex Box guide!

Hope this helps! Cheers! :beers: