简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > Web Front-end > CSS Tutorial > body text

Flexible 弹性盒子模型之CSS order 属性

高洛峰
Release： 2017-02-23 09:49:22
Original
1843 people have browsed it


实例

设置弹性盒对象元素的顺序：

  1. p#myRedp {order:2;}

  2. p#myBluep {order:4;}

  3. p#myGreenp {order:3;}

  4. p#myPinkp {order:1;}





手册网(www.shouce.ren)






  

  

  

  





注意: Internet Explorer 10 及更早版本浏览器不支持 order 属性。


注意: Safari 6.1 及更新版本通过 -webkit-order 属性支持该属性。
Copy after login

效果预览

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性     
order29.0
21.0 -webkit-		11.028.0
18.0 -moz-		9.0
6.1 -webkit-		17.0

定义和用法

order 属性 设置或检索弹性盒模型对象的子元素出现的順序。。

注意：如果元素不是弹性盒对象的元素，则 order 属性不起作用。

默认值：0
继承：否
可动画化：是，参见个别的属性。请参阅 CSS3动画属性、CSS3动画实例。 效果预览
版本：CSS3
JavaScript 语法：object.style.order="2" 效果预览

 

CSS 语法


order: number|initial|inherit;

属性值

值描述
number默认值是 0。规定灵活项目的顺序。
initial设置该属性为它的默认值。请参阅 initial。
inherit从父元素继承该属性。请参阅 inherit。
更多Flexible 弹性盒子模型之CSS order 属性 相关文章请关注PHP中文网！
Related labels：
CSS order
source：php.cn
Previous article：css中的三种基本定位机制 Next article：Flexible 弹性盒子模型之CSS justify-content 属性
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Latest Articles by Author
Latest Issues
WordPress 6.0 (add_editor_style) does not load style.css in Gutenberg editor I'm taking the UdemyWordPress course to create a custom WordPress block theme. I successfu...
From 2023-11-12 20:37:50
0 2 261
CSS leading zeros for decimals not working with large numbers Recently I ran into a problem where I created an ordered list with over a hundred list ite...
From 2023-11-07 10:35:53
0 1 236
Sass error: File already loaded: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; src\css\quasar.variables.scss I'm using the quasar framework and while compiling my project I encountered the above erro...
From 2023-11-06 21:38:55
0 1 219
How to embed background video in HTML/CSS? Hi everyone, I recently encountered a problem. I'm trying to set a video background to my ...
From 2023-11-06 13:59:13
0 1 240
How to get the RGB value of CSS/HTML named color in JavaScript I have created a Javascript object called [name-rgb]. Your basic:namedColors={AliceBlue:[2...
From 2023-11-06 09:05:50
0 2 210
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！