2.5 KiB
2.5 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d78ad367417b2b2512afa | Use the flex-wrap Property to Wrap a Row or Column | 0 | https://scrimba.com/p/pVaDAv/cQv9ZtG |
Description
flex-wrap
property, it tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.
CSS also has options for the direction of the wrap:
nowrap
: this is the default setting, and does not wrap items.wrap
: wraps items from left-to-right if they are in a row, or top-to-bottom if they are in a column.wrap-reverse
: wraps items from bottom-to-top if they are in a row, or right-to-left if they are in a column.
Instructions
flex-wrap
to the #box-container
element, and give it a value of wrap.
Tests
tests:
- text: The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.
testString: assert($('#box-container').css('flex-wrap') == 'wrap', 'The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.');
Challenge Seed
<style>
#box-container {
background: gray;
display: flex;
height: 100%;
}
#box-1 {
background-color: dodgerblue;
width: 25%;
height: 50%;
}
#box-2 {
background-color: orangered;
width: 25%;
height: 50%;
}
#box-3 {
background-color: violet;
width: 25%;
height: 50%;
}
#box-4 {
background-color: yellow;
width: 25%;
height: 50%;
}
#box-5 {
background-color: green;
width: 25%;
height: 50%;
}
#box-6 {
background-color: black;
width: 25%;
height: 50%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
<div id="box-5"></div>
<div id="box-6"></div>
</div>
Solution
// solution required