2018-10-10 18:03:03 -04:00
|
|
|
|
---
|
|
|
|
|
id: 587d78ae367417b2b2512aff
|
2021-01-08 11:20:48 -08:00
|
|
|
|
title: 使用 order 属性重新排列子元素
|
2018-10-10 18:03:03 -04:00
|
|
|
|
challengeType: 0
|
2020-02-11 21:32:25 +08:00
|
|
|
|
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvNAG'
|
|
|
|
|
forumTopicId: 301116
|
2018-10-10 18:03:03 -04:00
|
|
|
|
---
|
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
# --description--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2021-01-08 11:20:48 -08:00
|
|
|
|
`order` 属性告诉 CSS flex 容器里子元素的顺序。默认情况下,项目排列顺序与源 HTML 文件中顺序相同。`order` 属性接受数字作为参数,可以使用负数。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
# --instructions--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2021-01-08 11:20:48 -08:00
|
|
|
|
请给 `#box-1` 和 `#box-2` 添加 CSS 属性 `order`,并将 `#box-1` 的`order` 属性值设为 `2`,`#box-2` 的属性值设为 `1`。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
# --hints--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2021-01-08 11:20:48 -08:00
|
|
|
|
`#box-1` 元素应具有 `order` 属性,其属性值应为 `2`。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
```js
|
|
|
|
|
assert($('#box-1').css('order') == '2');
|
2018-10-10 18:03:03 -04:00
|
|
|
|
```
|
|
|
|
|
|
2021-01-08 11:20:48 -08:00
|
|
|
|
`#box-2` 元素应具有 `order` 属性,其属性值应为 `1`。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
```js
|
|
|
|
|
assert($('#box-2').css('order') == '1');
|
2018-10-10 18:03:03 -04:00
|
|
|
|
```
|
2020-02-11 21:32:25 +08:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
# --solutions--
|
|
|
|
|
|