Menu
CoddyTech

order

Coddy CSS Flexbox:完整课程 课程的第 13 课,共 15 课。

order 属性定义了特定弹性项目的优先级。

默认情况下,弹性项目按照源代码中的顺序排列,但你可以使用 order 属性修改顺序。

order 属性的值是一个数字,数字越大,弹性项目的优先级越高(会排在最后)。

例如:

.item {
  order: 5;
}

默认值为 0。

order 相同的项目会按照源代码中的顺序排列。

challenge icon

挑战

简单

这里有一个包含 6 个弹性项目的 flexbox,请为偶数位置的弹性项目(2、4、6)添加 order 属性,使项目的顺序变为:

1,3,5,2,4,6

你可以在 CSS 中使用 HTML 的 id 和 class 来选择特定元素。

亲手试试

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </body>
</html>

CSS Flexbox:完整课程中的所有课

自己练习: Web 在线编辑器