弹性盒子中的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 属性决定 ...
随机推荐
- LinkedList实现原理（JDK1.8）
LinkedList实现原理(JDK1.8) LinkedList底层采用双向链表,如果对链表这种结构比较熟悉的话,那LinkedList的实现原理看明白就相当容易. 链表通过"指针&quo ...
- 分布式存储Minio集群环境搭建
MinIO 分布式集群搭建 分布式 Minio 可以让你将多块硬盘(甚至在不同的机器上)组成一个对象存储服务.由于硬盘分布在不同的节点上,分布式 Minio 避免了单点故障. Minio 分布式模式可 ...
- 【C/C++】之C语言库函数
这个帖子记录一下 C语言 中经常用到的函数库中的函数及其用法. 1.<math.h> math.h是进行数学操作的函数库.使用这个函数库,需要先导入包: #include <math ...
- Java秋招面试复习大纲(二)：Spring全家桶+MyBatis+MongDB+微服务
前言 对于那些想面试高级 Java 岗位的同学来说,除了算法属于比较「天方夜谭」的题目外,剩下针对实际工作的题目就属于真正的本事了,热门技术的细节和难点成为了面试时主要考察的内容. 这里说「天方夜谭」 ...
- AWK工具 使用介绍
第6周第5次课(4月27日) 课程内容: 9.6/9.7 awk扩展把这里面的所有练习题做一下http://www.apelearn.com/study_v2/chapter14.html 9.6/9 ...
- Python爬虫帮你打包下载所有抖音好听的背景音乐，还不快收藏一起听歌【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...
- 来看看Python炫酷的颜色输出与进度条打印
英语单词优化 上篇文章写到了Python开发英语单词记忆工具,其中依赖了bootstrap.css jQuery.js 基础html模块以及片段的css样式.有些朋友问,怎么能将这个练习题打包成单独的 ...
- Numpy的基础用法
1.用Numpy创建数组 numpy.array(object):创建数组,与array.array(typecode[, initializer])不同,array.array()只能创建一维数组 ...
- python中for循环删除不全的问题
以前遇到过一次,删除列表中符合条件的元素,for循环挨个判断是否符合条件,符合就删除,删完结果发现有一个符合条件的没有删掉. 那么如果想删除某些列表中的元素,比如有一个a列表,a=[11,22,33, ...
- jQuery操作页面的元素
主要有添加,替换,删除,清空三种方式: 添加又分为,在之前添加,在之后添加,在元素外之前添加,在元素外之后添加.每个添加方式又有俩种方法(效果一模一样): 俩种方法区添加,在原内容之后: p.appe ...