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 Flexbox Properties Wrapping Flex Items

Mike Me
Mike Me
5,148 Points
Posted by Mike Me
Mike Me
5,148 Points

Flex-wrap doesn't work.

I was fallowing along with this video, but flex-wrap did no effect on items at all. It shrinks as much as it can and when it can't it just jumps out of it's container.

Mike Me
Mike Me
5,148 Points
Mike Me
Mike Me
5,148 Points

I do not know why but it worked and I has not changed anything.

Julie Maya
Julie Maya
14,666 Points
Julie Maya
Julie Maya
14,666 Points

Mine as well. I changed the item title into other longer wording, and the flex-wrap doesn't work when I shrink the screen into the smallest. So I changed the title back to "item 1" and it works.

4 Answers

Robert Szabo
Robert Szabo
7,999 Points
Robert Szabo
Robert Szabo
7,999 Points

Mike, What happened with me is that I forgot to refresh the preview, refreshing solved my similar problem.

Julie, I was experimenting with longer words too. It looks like, the flex-wrap is not willing to brake the items anywhere but spaces between words. Which make sense since it would create even more problem. So I guess we should follow a guideline not to write longer words than what can appear on the smallest screen, otherwise it will look bad, overflow etc.

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Perhaps the first time you just forgot to save your edits in the workspace, or to refresh your browser.

Joy LeDuc Krupnow
Joy LeDuc Krupnow
3,833 Points
Joy LeDuc Krupnow
Joy LeDuc Krupnow
3,833 Points

I am on a Mac, using Chrome (as it appears Gil is, as well). When I added the height: 280px; line to my code, there was no wrapping of the items within the container. Once I followed the link to MDN, provided in the Teacher's Notes for this video, I found that the height property was listed first, before any flex properties or values. Once I changed my code, and put the height: 280px; line first, the wrapping of the columns worked exactly as it appears in Gil's video example.

Elizabeth Caney
Elizabeth Caney
4,287 Points
Elizabeth Caney
Elizabeth Caney
4,287 Points 
    <div class="container">
        <div class="content">Item 1</div>
        <div class="content">Item 2</div>
        <div class="content">Item 3</div>
        <div class="content">Item 4</div>
        <div class="content">Item 5</div>
        <div class="content">Item 6</div>
    </div>

.container {
    height: 280px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.content {
    background-color: lightgrey;
    border: 1px solid #fff;
    padding: 10px;
    color: white;
    text-transform: uppercase;
}

When I worked in the workstation I had no problem but transferring this onto my own practise project and it doesnt work?! Using chrome.. Have messed around a bit with the order of the properties. Can't get it to work - is there something really simple I'm missing?

Thanks !

NOTE - Once I started playing around with adding margins + padding.. It worked!