Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Can't get flex-wrap to function correctly with this code

<section> <div class="header"> <div class="col"> <h2>Lorem</h2> <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </div> <div class="col"> <h2>Lorem</h2> <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </div> <div class="col"> <h2>Lorem</h2> <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </div> </div> </section>

CSS:

.header { display: flex; flex-wrap: wrap; }

I was expecting each div with class "col" to display in a row, and then wrap as the viewport size decreased. This is what usually happens when I use the property, like when I completed the flexbox layout course. Here, when I add the flex-wrap property it seems to "cancel out" the default behavior of the flex container, and all elements are displayed as standard.

Thanks for any help!

2 Answers

Steven Parker
Steven Parker
216,136 Points

Jason has the right idea. You can do it his way:

.header { display: flex; }
.col { flex-wrap: wrap; }

Or you can directly select the div's inside the header, in that case you don't need the col class:

.header { display: flex; }
.header > div { flex-wrap: wrap; }
Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,624 Points

I think you may need to have your flex-wrap: wrap; added to the .col class instead of the .header class.

:)