freeCodeCamp/use-the-order-property-to-rearrange-items.english.md at f1c9b08cf322e4268a0a31ae9b5d75bf3cfce7d1

Oliver Eyton-Williams f1c9b08cf3 fix(curriculum): add isHidden: false to challenges

This includes certificates (where it does nothing), but does not
include any translations.

2020-05-25 16:25:19 +05:30

2.0 KiB

Raw Blame History

id, title, challengeType, isHidden, videoUrl, forumTopicId

id	title	challengeType	isHidden	videoUrl	forumTopicId
587d78ae367417b2b2512aff	Use the order Property to Rearrange Items	0	false	https://scrimba.com/p/pVaDAv/cMbvNAG	301116

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.

Tests

tests:
  - text: The <code>#box-1</code> element should have the <code>order</code> property set to a value of <code>2</code>.
    testString: assert($('#box-1').css('order') == '2');
  - text: The <code>#box-2</code> element should have the <code>order</code> property set to a value of <code>1</code>.
    testString: assert($('#box-2').css('order') == '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

<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>

2.0 KiB Raw Blame History