Learn
Flexbox
flex-wrap

Sometimes, we don’t want our content to shrink to fit its container. Instead, we might want flex items to move to the next line when necessary. This can be declared with the flex-wrap property. The flex-wrap property can accept three values:

  1. wrap — child elements of a flex container that don’t fit into a row will move down to the next line
  2. wrap-reverse — the same functionality as wrap, but the order of rows within a flex container is reversed (for example, in a 2-row flexbox, the first row from a wrap container will become the second in wrap-reverse and the second row from the wrap container will become the first in wrap-reverse)
  3. nowrap — prevents items from wrapping; this is the default value and is only necessary to override a wrap value set by a different CSS rule.
<div class="container"> <div class="item"> <h1>We're going to wrap!</h1> </div> <div class="item"> <h1>We're going to wrap!</h1> </div> <div class="item"> <h1>We're going to wrap!</h1> </div> </div>
.container { display: inline-flex; flex-wrap: wrap; width: 250px; } .item { width: 100px; height: 100px; }

In the example above, three flex items are contained by a parent flex container. The flex container is only 250 pixels wide so the three 100 pixel wide flex items cannot fit inline. The flex-wrap: wrap; setting causes the third, overflowing item to appear on a new line, below the other two item.

Note: The flex-wrap property is declared on flex containers.

Instructions

1.

Add a flex-wrap property with the value of wrap to the div with the id #wrap. Shrink and stretch the browser.

2.

Add a flex-wrap property with the value of nowrap to the div with the id #nowrap. Shrink and stretch the browser.

3.

Add a flex-wrap property with the value of wrap-reverse to the div with the id #reverse. Shrink and stretch the browser.

4.

Add a justify-content value of space-around to the .container rule in style.css. Stretch and shrink the browser. What’s different this time?

Folder Icon

Take this course for free

Already have an account?