实例

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

  1. div#myRedDIV {order:2;}
  2. div#myBlueDIV {order:4;}
  3. div#myGreenDIV {order:3;}
  4. div#myPinkDIV {order:1;}
复制

效果预览


浏览器支持

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

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

属性          
order 29.0
21.0 -webkit-
11.0 28.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 属性的更多相关文章

  1. Flexible 弹性盒子模型之CSS justify-content 属性

    实例 在弹性盒对象的 <div> 元素中的各项周围留有空白: div { display: flex; justify-content: space-around; } 复制 效果预览 浏 ...

  2. Flexible 弹性盒子模型之CSS flex-basis 属性

    实例 设置第二个弹性盒元素的初始长度为 80 像素: div:nth-of-type(2){flex-basis:80px;}   效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本 ...

  3. Flexible 弹性盒子模型之CSS flex-shrink 属性

    实例 让第二个元素收缩到其他元素的三分之一: 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 - ...

  4. Flexible 弹性盒子模型之CSS flex-grow 属性

    实例 让第二个元素的宽度为其他元素的三倍: div:nth-of-type(1){flex-grow:1;} div:nth-of-type(2){flex-grow:3;} div:nth-of-t ...

  5. Flexible 弹性盒子模型之CSS align-self 属性

    实例 居中对齐弹性对象元素内的某个项: #myBlueDiv { align-self:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -w ...

  6. Flexible 弹性盒子模型之CSS align-items 属性

    实例 居中对齐弹性盒的各项 <div> 元素: div { display: flex; align-items:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性 ...

  7. Flexible 弹性盒子模型之CSS flex-wrap 属性

    实例 让弹性盒元素在必要的时候拆行: display:flex; flex-wrap: wrap; 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webki ...

  8. Flexible 弹性盒子模型之CSS flex-flow

    实例 让弹性盒的元素以相反的顺序显示,且在必要的时候进行拆行: display:flex; flex-flow:row-reverse wrap;   效果预览 浏览器支持 表格中的数字表示支持该属性 ...

  9. Flexible 弹性盒子模型之CSS flex-direction

    实例 设置 <div> 元素内弹性盒元素的方向为相反的顺序: div { display:flex; flex-direction:row-reverse; } 复制 效果预览 浏览器支持 ...

随机推荐

  1. eclipse web项目的发布路径

    java Build path是编译路径设置,主要用来设置源代码的编译路径默认是default output folder Web Deployment Assembly是eclipse中的发布路径设 ...

  2. python 切换工作路径 为指定文件夹

    切换工作路径为了更好的在目录下面执行针对当前项目的命令 比如 git.svn .打包 等操作 关键命令: os.chdir() 切换到指定路径: # sys.path[0] 当前脚本路径 # 当前脚本 ...

  3. git pull 分支问题

    问题: 是因为本地分支与远程分支没有链接关系, 让他们建立链接关系

  4. Codeforces Round #414 C. Naming Company

    http://codeforces.com/contest/794/problem/C 题意: 有两个人要为公司起名字,每个人手中都有n个字符,现在要取一个n个字符长度的公司名.两人轮流取名,每次选择 ...

  5. Gym - 100712B Rock-Paper-Scissors

    https://vjudge.net/problem/Gym-100712B 题意: 石头剪刀布游戏. 给出一个玩家n局的出的顺序,现在另一个是这样出的,X+Y+Z=n,在前X轮出石头,中间Y轮出布, ...

  6. Gogeos安装

    环境要求: Windows64,Go,minGW(统一64位) 1.安装geos 下载GEOS 3.3.8源码,解压后,按readme文件编译(基于VS2010的64位编译工具执行的nmake编译命令 ...

  7. jQuery实际案例①——淘宝精品广告(鼠标触碰切换图片、自动轮播图片)

    遇到的问题:自动轮播的实现,实质与轮播图一样儿一样儿的,不要被不同的外表所欺骗,具体的js代码如下:

  8. Swoft 快速上手小贴士

    IDE一定要装注解插件PHP Annotations Request和Response里的with...开头的方法会clone $this, 而不是修改本实体, 所以设置Cookie之类的时候要$re ...

  9. python+opencv链接摄像头

    import cv2 import numpy as numpy cap=cv2.VideoCapture(0) #设置显示分辨率和FPS ,不设置的话会非常卡 cap.set(cv2.CAP_PRO ...

  10. Lubuntu系统中java,tomcat的环境搭建(virtualbox中)

    一.安装Lubuntu系统 这一步没什么说的,到官网下载镜像,在virtualbox中安装即可安装时就已经可以选择安装源,当然,选中国的设置环装网络,可将该虚拟机设立为网络上的独立IP,和物理机间可以 ...