1.8 KiB
1.8 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
587d78ae367417b2b2512aff | Usare la proprietà order per riorganizzare gli elementi | 0 | https://scrimba.com/p/pVaDAv/cMbvNAG | 301116 | use-the-order-property-to-rearrange-items |
--description--
La proprietà order
è usata per dire al CSS con che ordine gli elementi flex appaiono nel contenitore flex. Per impostazione predefinita, gli elementi appariranno nello stesso ordine con cui arrivano nell'HTML sorgente. La proprietà prende i numeri come valori, e possono essere usati anche i numeri negativi.
--instructions--
Aggiungere la proprietà CSS order
sia a #box-1
che a #box-2
. Dare a #box-1
un valore di 2
e dare a #box-2
un valore di 1
.
--hints--
L'elemento #box-1
dovrebbe avere la proprietà order
impostata su un valore di 2
.
assert($('#box-1').css('order') == '2');
L'elemento #box-2
dovrebbe avere la proprietà order
impostata su un valore di 1
.
assert($('#box-2').css('order') == '1');
--seed--
--seed-contents--
<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--
<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>