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:
wrap
— child elements of a flex container that don’t fit into a row will move down to the next linewrap-reverse
— the same functionality aswrap
, but the order of rows within a flex container is reversed (for example, in a 2-row flexbox, the first row from awrap
container will become the second inwrap-reverse
and the second row from thewrap
container will become the first inwrap-reverse
)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 items.
Note: The flex-wrap
property is declared on flex containers.
Instructions
In style.css, inside the #wrap
ruleset, add a flex-wrap
property with a value of wrap
. Shrink and stretch the browser.
Inside the #nowrap
ruleset, add a flex-wrap
property with a value of nowrap
. Shrink and stretch the browser.
Inside the #reverse
ruleset, add a flex-wrap
property with a value of wrap-reverse
. Shrink and stretch the browser.
Inside the .container
ruleset, add a justify-content
property with a value of space-around
. Stretch and shrink the browser. What’s different this time?