Flexible 弹性盒子模型之CSS order 属性
实例
设置弹性盒对象元素的顺序:
- div#myRedDIV {order:2;}
- div#myBlueDIV {order:4;}
- div#myGreenDIV {order:3;}
- 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 语法
属性值
值 | 描述 |
---|---|
number | 默认值是 0。规定灵活项目的顺序。 |
initial | 设置该属性为它的默认值。请参阅 initial。 |
inherit | 从父元素继承该属性。请参阅 inherit。 |
Flexible 弹性盒子模型之CSS order 属性的更多相关文章
- Flexible 弹性盒子模型之CSS justify-content 属性
实例 在弹性盒对象的 <div> 元素中的各项周围留有空白: div { display: flex; justify-content: space-around; } 复制 效果预览 浏 ...
- Flexible 弹性盒子模型之CSS flex-basis 属性
实例 设置第二个弹性盒元素的初始长度为 80 像素: div:nth-of-type(2){flex-basis:80px;} 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本 ...
- Flexible 弹性盒子模型之CSS flex-shrink 属性
实例 让第二个元素收缩到其他元素的三分之一: 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 - ...
- Flexible 弹性盒子模型之CSS flex-grow 属性
实例 让第二个元素的宽度为其他元素的三倍: div:nth-of-type(1){flex-grow:1;} div:nth-of-type(2){flex-grow:3;} div:nth-of-t ...
- Flexible 弹性盒子模型之CSS align-self 属性
实例 居中对齐弹性对象元素内的某个项: #myBlueDiv { align-self:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -w ...
- Flexible 弹性盒子模型之CSS align-items 属性
实例 居中对齐弹性盒的各项 <div> 元素: div { display: flex; align-items:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性 ...
- Flexible 弹性盒子模型之CSS flex-wrap 属性
实例 让弹性盒元素在必要的时候拆行: display:flex; flex-wrap: wrap; 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webki ...
- Flexible 弹性盒子模型之CSS flex-flow
实例 让弹性盒的元素以相反的顺序显示,且在必要的时候进行拆行: display:flex; flex-flow:row-reverse wrap; 效果预览 浏览器支持 表格中的数字表示支持该属性 ...
- Flexible 弹性盒子模型之CSS flex-direction
实例 设置 <div> 元素内弹性盒元素的方向为相反的顺序: div { display:flex; flex-direction:row-reverse; } 复制 效果预览 浏览器支持 ...
随机推荐
- js正则匹配两位小数
今天写一个用js正则校验最多保留两位小数的格式. a = /^\d+|\d+\.\d{1,2}$/; 测试 a.test(1.222); 结果:true 一下蒙了,怎么可能,最后找了好久,原来需要把^ ...
- APP接口版本不兼容怎么办? 教你一招
现在基本每个公司都做APP,所以大家都面临 APP接口版本兼容的问题. iOS和android 要不断开发新版本,很多服务端开发都是在以前接口的逻辑上进行修改.新的APP和接口开发后,接口如何兼容老的 ...
- LeetCode (236):Lowest Common Ancestor of a Binary Search Tree
Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...
- 【前端】vue.js实现按钮的动态绑定
vue.js实现按钮的动态绑定 实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定< ...
- Mybatis 一对多 简单映射配置
只需在一对多的 “一” Model中定义一个list集合: public class SelectQuestion{ // 主键ID private Integer id; private Strin ...
- 关于Java -cp引用jar是否支持通配符
其实是支持的: JDK6支持java -cp后面跟通配符'*',试了一下发现还是需要注意: 错误方式(Wrong way): java -cp /data/apps/lib/*.jar com.ch ...
- vue.js的一些小语法v-for,v-text,v-html,v-on:click
1.Vue的目录结构: ======================================================================================== ...
- c# 调用webapi 传参 特殊字符的问题
最近在做对接数据接口,遇到一些问题,在C#后台写请求webapi的接口,但是传递过程中参数如果有特殊字符,传入过去之后又问题. 需要转换一下,通过System.Web.HttpUtility.UrlE ...
- MAC OS 命令行使用详解【转】
你可以整天驾驶汽车而不用知道如何修理它们,但是如果你希望当一个维护员,你就需要知道事情是如何运作的.同样的事情也发生在了 Mac OS X 上:你可以一直使用 Mac 而不用知道如何修理它,但是如果你 ...
- i++为什么是线程不安全的
主要是因为i++这个操作不是原子性的,它会编译成 i = i +1: 其实是做了3个步骤,一个是读取,修改,写入 .所以会出现多线程访问冲突问题. 可以结合Java内存模型来进行说明.