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 Unused CSS Stages Flexbox and Multi-Column Layout Flexbox: Part 2

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
Posted by SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Hi did anyone else notice this?

Hi did anyone else notice this? In the video before this, "flexbox part 1" when we applied the display: flex; property to the .nav element it removed it from its default vertical stack and aligned it in a single row. But it created an overflow problem and to fix it we had to give it a flex-wrap: wrap to fix that. Did you notice that in this lesson, when Guil Hernandez gave the .main the display: flex; property he didn't give it the flex-wrap property. I thought it wasn't needed but I resized my browser just to be sure and the overflow problem was there. when the browser gets too small the columns overflow out of the container. I proceeded to add the flex-wrap property but when I did that it didn't align them in a column instead it stacked them vertically one on top the other. Unlike the results we had in the .nav or when we just added the display: flex property. At the end of the video Guil used a media query to stack the columns vertically when the browser gets too small. Can Someone explain why this is happening, or what is going on. I'm a bit, sorry, very confused with this flexbox and all it's properties and values. Thanks. FYI I'm a newb so please try to explain in layman's term. Thanks guys.

Eric Ridolfi
Eric Ridolfi
19,417 Points

Is your question about the media query or something else? I am not sure I understand what you are asking exactly.

It seems to me that you are confused about why he used a media query instead of just using flexbox-wrap, similar to the navigation?

SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Hi Eric Ridolfi , my question is, why didn't he add the flex-wrap property to the .col and why when you add the flex-wrap it stacks the columns vertically instead of horizontally like it does in the .nav element? Is there a specific reason that I missed or something or was it just an oversight, and it still doesn't explain why when I add the flex-wrap it stacks it in a single column and not a row. Thanks for your time buddy.

Eric Ridolfi
Eric Ridolfi
19,417 Points

Hi Samuel,

I am not 100% sure but I can tell you that flex-wrap property is a property for the parent element. So it is my understanding that it wouldn't work on a child element. However, I did test it on the parent element (.main) and it still did not work. I can't really say why other than the nav is an unordered list and perhaps flexbox handles list items differently?

The media query changes the flex-direction from row to column which allows the .col divs to stack when the browser is 999px or smaller.

I am just learning this stuff too. If you need anything else please feel free to ask.

These two articles about flexbox are a pretty good reference: http://blog.teamtreehouse.com/responsive-design-of-the-future-with-flexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/