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 Ahmed Mohamed Fouad
Ahmed Mohamed Fouad
11,735 Points

when using flex shorthand property , the flex items do break to a new line, that's no happening in the video !

in this video https://teamtreehouse.com/library/css-flexbox-layout/flexbox-properties/smarter-layouts-with-flexbasis-and-flex

starting from 6:07 when setting the flex values like this

/* ================================= 
  Flexbox
==================================== */

.container {
    display: flex;
    flex-wrap: wrap;
}
.item {
  flex: 1;
}

.item-2 {
  flex: 2;
}

it was said ( in the video ) that the flex items will not break to a new line, but with the same code on my worspace using chrome browser, they do break to a new line when narrowing to a certain width, so any Explanation ?

1 Answer

Nick Trabue
Nick Trabue
Courses Plus Student 12,666 Points 
.container {
    display: flex;
    flex-wrap: wrap;
}

Flex-wrap's default value is nowrap but because flex-wrap is set to wrap it will cause the content to wrap as the browser narrows

Ahmed Mohamed Fouad
Ahmed Mohamed Fouad
11,735 Points

thanks Nick :)