弹性盒子中的order
order
order 属性 设置或检索弹性盒模型对象的子元素出现的順序。。
注意：如果元素不是弹性盒对象的元素，则 order 属性不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Demo</title>
<style>
.container1 {
height: 500px;
display: flex;
border: 2px solid #ccc;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.item {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="container1">
<div class="item" style="background-color: red;order: 1"></div>
<div class="item" style="background-color: yellow;order: 1"></div>
<div class="item" style="background-color: blue;order: -1"></div>
</div>
</body>
</html>
弹性盒子中的order的更多相关文章
- CSS3 Flex Box（弹性盒子）
CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...
- css3弹性盒子
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...
- CSS3总结五：弹性盒子(flex)、弹性盒子布局
弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...
- 弹性盒子FlexBox简介（二）
弹性盒子属性 一.align-content属性 属性作用:用于修改flex-wrap属性行为.类似于justify-content,但它不是设置弹性子元素的对齐,而是设置各个行的对齐. 属性值: f ...
- CSS3 弹性盒子(Flex Box)
1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...
- CSS3中的弹性盒子模型
介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案 ...
- css中的f弹性盒子模型的应用案例
案例1: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...
- 【CSS3】 CSS3:弹性盒子（Flex Box）
Flex布局是什么 如何指定一个容器为Flex布局 Flex的基本语法 display flex-direction justify-content align-items flew-wrap ali ...
- flexbox 弹性盒子
flexbox 弹性盒子 1.基本知识 container(容器)属性 flex-direction: row | row-reverse | column | column-reverse 属性决定 ...
随机推荐
- Lab6：进程的调度
CPU调度 从就绪队列中挑选下一个占用CPU运行的进程,从多个可用CPU中挑选就绪进程可使用的CPU资源 调度策略 比较调度算法的准则 CPU使用率 吞吐量 周转时间 就绪等待时间 响应时间 吞吐量与 ...
- 内核升级在线安装报错：Could not retrieve mirrorlist http://mirrors.elrepo.org/mirrors-elrepo-kernel.el7 error was14: curl#6 - "Could not resolve host: mirrors.elrepo.org; 未知的错误"
修改网卡配置 [root@localhost ~]# vim /etc/sysconfig/network-scripts/ifcfg-ens32 BOOTPROTO="none" ...
- webpack到底是干什么用的？
转载于:https://segmentfault.com/a/1190000014148611?utm_source=tag-newest 概念问题一:什么是webpack和grunt和gulp有什么 ...
- Nginx防盗链、访问控制、解析PHP相关配置及Nginx代理
6月11日任务 12.13 Nginx防盗链12.14 Nginx访问控制12.15 Nginx解析php相关配置12.16 Nginx代理 扩展502问题汇总 http://ask.apelearn ...
- Linux监控平台介绍、zabbix监控介绍、安装zabbix、忘记Admin密码如何做
7月6日任务 19.1 Linux监控平台介绍19.2 zabbix监控介绍19.3/19.4/19.5 安装zabbix19.6 忘记Admin密码如何做 19.1 Linux监控平台介绍 一般大公 ...
- spring源码学习五 - xml格式配置，如何解析
spring在注入bean的时候,可以通过bean.xml来配置,在xml文件中配置bean的属性,然后spring在refresh的时候,会去解析xml配置文件,这篇笔记,主要来记录.xml配置文件 ...
- ruby方法名之命名方式
上一篇博文 ruby传参之引用类型 里边定义了一个方法名 modify_my_object!,这个方法名是以 ! 结尾,在 ruby 的对象里边是用于表达修改本身的意思. 比如 String#gsub ...
- Flask框架flash消息闪现学习与优化符合闪现之名
Flask的flash 第一次知道Flask有flash这个功能时,听这名字就觉得高端,消息闪现-是跳刀blink闪烁躲技能的top10操作吗?可结果让我好失望,哪里有什么闪现的效果,不过是平常的消息 ...
- Object类和@Data注解
特别说明:若是有不对的地方欢迎指正 简要概述: Object类是java中所有类默认继承的一个类.下面介绍一下Object类中的一些重要的方法,面试中也是经常会被问到的.尤其是==和equals的区别 ...
- ajax异步请求的常见方式
首先先介绍下ajax,ajax(ASynchronous JavaScript And XML)为异步的javascript和xml.所谓的异步和同步是指: 同步:客户端必须等待服务器的响应,在等待期 ...