ee1e8abd87
* feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
91 lines
1.6 KiB
Markdown
91 lines
1.6 KiB
Markdown
---
|
|
id: 587d78ae367417b2b2512aff
|
|
title: Use the order Property to Rearrange Items
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvNAG'
|
|
forumTopicId: 301116
|
|
dashedName: use-the-order-property-to-rearrange-items
|
|
---
|
|
|
|
# --description--
|
|
|
|
The `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--
|
|
|
|
Add the CSS property `order` to both `#box-1` and `#box-2`. Give `#box-1` a value of `2` and give `#box-2` a value of `1`.
|
|
|
|
# --hints--
|
|
|
|
The `#box-1` element should have the `order` property set to a value of `2`.
|
|
|
|
```js
|
|
assert($('#box-1').css('order') == '2');
|
|
```
|
|
|
|
The `#box-2` element should have the `order` property set to a value of `1`.
|
|
|
|
```js
|
|
assert($('#box-2').css('order') == '1');
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```html
|
|
<style>
|
|
#box-container {
|
|
display: flex;
|
|
height: 500px;
|
|
}
|
|
#box-1 {
|
|
background-color: dodgerblue;
|
|
order: 2;
|
|
height: 200px;
|
|
width: 200px;
|
|
}
|
|
|
|
#box-2 {
|
|
background-color: orangered;
|
|
order: 1;
|
|
height: 200px;
|
|
width: 200px;
|
|
}
|
|
</style>
|
|
|
|
<div id="box-container">
|
|
<div id="box-1"></div>
|
|
<div id="box-2"></div>
|
|
</div>
|
|
```
|