freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md

id	challengeType	videoUrl	forumTopicId	title
587d78ae367417b2b2512aff	0	https://scrimba.com/p/pVaDAv/cMbvNAG	301116	使用 order 属性重新排列项目

Description

order属性告诉 CSS flex 容器里项目的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。

Instructions

给#box-1和#box-2添加 CSS 属性order，#box-1的order属性值设为 2，#box-2的order属性值设为 1。

Tests

tests:
  - text: <code>#box-1</code>元素应有<code>order</code>属性，其值应为 <code>2</code>。
    testString: assert($('#box-1').css('order') == '2');
  - text: <code>#box-2</code>元素应有<code>order</code>属性，其值应为 <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

// solution required