From the course: Responsive Layout

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Wrapping

Wrapping - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

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…

Contents