order
Coddy CSS Flexbox:完整课程 课程的第 13 课,共 15 课。
order 属性定义了特定弹性项目的优先级。
默认情况下,弹性项目按照源代码中的顺序排列,但你可以使用 order 属性修改顺序。
order 属性的值是一个数字,数字越大,弹性项目的优先级越高(会排在最后)。
例如:
.item {
order: 5;
}默认值为 0。
order相同的项目会按照源代码中的顺序排列。
挑战
简单这里有一个包含 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 在线编辑器