css中order属性的介绍-css教程-PHP中文网

css中order属性的介绍

尊渡假赌尊渡假赌尊渡假赌

发布： 2025-12-01 17:30:07

原创

164人浏览过

order属性用于调整Flexbox子元素的显示顺序，整数值越小越靠前，默认为0。需父容器设为flex才生效，不改变DOM结构，适用于响应式布局调整。

css中order属性的介绍

在CSS中，order属性用于控制弹性盒子（Flexbox）容器中子元素的排列顺序。默认情况下，弹性子元素按照它们在HTML中出现的顺序进行排列，但通过order属性可以灵活地改变这一顺序。

基本语法

order: <integer>;

其中，<integer> 是一个整数值，可以是正数、负数或零。默认值为 0。数值越小，元素越靠前排列；数值相同时，按文档流顺序排列。

使用场景与示例

假设你有一个弹性容器，包含三个子元素，你想让第二个元素显示在最后：

45°C商城系统

系统介绍 45°C 商城系统，以 Thinkphp5.0 + Uniapp + Layui2.9 + Vue 为技术基石，精心打造出的全新 MINI 商城应用。其功能覆盖全面，无论是 PC 商城、H5 商城，还是公众号商城、微信小程序以及抖音小程序的制作都能完美胜任。采用标准系统结合插件模式开发，用户能够极为便捷地定制专属的个性模块。整个系统，从程序设计到 UI 呈现，都秉持着一贯的小而美理念。程

查看详情

立即学习“前端免费学习笔记（深入）”；

.container {
display: flex;
}
.item1 { order: 1; }
.item2 { order: 3; }
.item3 { order: 2; }

此时，页面上显示的顺序将是：item1 → item3 → item2。

注意事项

仅对弹性子元素有效：只有当父容器设置了 display: flex 或 display: inline-flex 时，order 才会起作用。
不影响语义结构：虽然视觉顺序改变了，但DOM结构和屏幕阅读器读取的顺序不变，因此要考虑可访问性问题。
不要依赖 order 来修复结构问题：建议HTML结构本身保持合理的语义顺序，order 应用于布局微调而非重构内容逻辑。