1.8 KiB
1.8 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d78ae367417b2b2512aff | Use the order Property to Rearrange Items | 0 | https://scrimba.com/p/pVaDAv/cMbvNAG |
Description
order
property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used.
Instructions
order
to both #box-1
and #box-2
. Give #box-1
a value of 2 and give #box-2
a value of 1.
Tests
tests:
- text: The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.
testString: assert($('#box-1').css('order') == '2', 'The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.');
- text: The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.
testString: assert($('#box-2').css('order') == '1', 'The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.');
Challenge Seed
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
width: 200px;
}
#box-2 {
background-color: orangered;
height: 200px;
width: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
Solution
// solution required