Wrapping

- [Instructor] Next we're going to talk about flex-wrap. The flex-wrap property determines what happens when there isn't space for all the flex items. Do thy squish and stay on one line or wrap onto multiple lines? We're going to need our flex items to be a bit wider for this example, so we're going to give them a width in the CSS. On line 14, for the class item , I am going to give it a width of 200 pixels. Now we have our five flex items, a bit wider, with a horizontal main axis.

For flex-wrap, the default is no wrap. I'm gonna go back to the container element in line 13, and do flex-wrap: nowrap. Note that there is no hyphen in nowrap, which is a little different, because many other properties in Flexbox have hyphens in their values. With this default, everything is going to stay on one line. In a wider viewport like this, they all fit, but as I make the viewport narrower, they won't all fit, with their defined width of 200 pixels, but as flex items, the browser will decrease their width, if possible, to fit them all inside the width of the container.

But if I change the value of flex-wrap to wrap. I'm here on line 13 of the code, save and refresh. Now, if I make the window less wide, they'll wrap onto extra lines, while keeping their 200 pixel width. The flex items are still filling the height of the container, but as their row wraps, they're only half as tall, so to fit vertically. There's one other value for flex-wrap, which is wrap-reverse. So on line 13, I'm going to change this to wrap-reverse.

Save, and refresh. Now without any wrapping, the page looks the same, but when we wrap the flex items on to a new line, you can see that the wrapping's starting from the opposite end of the cross axis. The last item, three, still wraps all by itself, but instead of the flex item starting at the top, the first line of flex items is on the bottom, with the last flex item above it. You can also combine flex-direction and flex-wrap using the flex-flow property.

Here in the code, flex-direction and flex-wrap, I'm just going to replace these two in the container element with flex-flow: and then row-reverse and wrap. And that is the same as what we just replaced.