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…