CSS CSS Flexbox Layout Flexbox Properties Wrapping Flex Items

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

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

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

Steven Parker
Steven Parker
205,587 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

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
    <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!

Robert Szabo
Robert Szabo
7,987 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.