CSS order 属性
CSS Order 属性
CSS Order 属性是用来控制 HTML 元素的摆放顺序的属性,它对于 Flexbox 布局非常有用。
在 Flexbox 布局中,Flex 容器内的元素默认按照 HTML 索引顺序来排布,但是有时候我们需要改变元素的排列顺序,这时候就可以用 CSS Order 属性来实现。
语法
CSS Order 属性接收一个整数值。这个数值越小,元素就越靠前。
.item {
order: <整数>;
}
用法
以下是一个简单的例子,我们有三个元素:#one
, #two
, #three
,它们默认按照 HTML 索引顺序排布。
<div class="container">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
</div>
.container {
display: flex;
}
这时候我们想要将 #three
放到最前面,则可以使用 CSS Order 属性:
#three {
order: -1;
}
这样一来,#three
就会出现在 #one
的前面,而其他元素的顺序不变。
注意事项
- CSS Order 属性是针对 Flex 内部元素设置的,也就是说,外部元素(比如 Flex 容器本身)不受影响。
- CSS Order 属性接收负数和小数,但是它们的计数方式与整数略有不同。通常不向下取整处理。详见下表:
值 | 计算方式 |
---|---|
n >= 0 | 向下取整 |
-1 <= n < 0 | 不处理 |
n < -1 | 向上取整 |
- CSS Order 属性会改变元素的布局顺序,但不会影响元素的排版方式。
- 当两个元素都设置了 Order 属性时,它们之间的排列顺序取决于它们的 Order 属性设置。
总结
CSS Order 属性可以帮助我们控制 Flexbox 布局中元素的排布顺序。
- 该属性值为整数,值越小则元素排布越靠前。
- 可以设置负数值或小数值。
- 与计数方式相关,要注意计算方式。
- 不会影响排版方式。
若在开发中需要调整元素排列顺序,CSS Order 属性是一个非常有用的工具。