Embedded Files
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 line
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)
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
Instructions
1.In style.css, inside the #wrap ruleset, add a flex-wrap property with a value of wrap. Shrink and stretch the browser.
2.Inside the #nowrap ruleset, add a flex-wrap property with a value of nowrap. Shrink and stretch the browser.
3.Inside the #reverse ruleset, add a flex-wrap property with a value of wrap-reverse. Shrink and stretch the browser.
4.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?
Page updated
Report abuse