弹性盒子中的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 属性决定 ...
随机推荐
- JavaScript笔记二
1.表格 - 在网页中可以通过表格来表示一些格式化的数据 - 表格相关的标签 - <table> 用来创建一个表格 - <tr> 表示表格中的一行 - <th> 表 ...
- MySQL数据库day20190922
1.dos命令 set names gbk; 2.MySQL练习#创建school数据库: create database school;#切换school数据库: use school; # pri ...
- python排序算法之一：冒泡排序（及其优化）
相信冒泡排序已经被大家所熟知,今天看了一篇文章,大致是说在面试时end在了冒泡排序上,主要原因是不能给出冒泡排序的优化. 所以,今天就写一下python的冒泡排序算法,以及给出一个相应的优化.OK,前 ...
- 最短路径算法（跟新SPFA，Ford）
//以城市路为蓝本介绍算法 1381:城市路(Dijkstra) 时间限制: 1000 ms 内存限制: 65536 KB提交数: 4517 通过数: 1306 [题目描述] ...
- 【JAVA - 基础】之String存储机制浅析
本文主要解决以下几个问题 String源码解析? String和new String的区别? String通过"+"或concat累加时的对象创建机制? StringBuilder ...
- “狗屁不通文章生成器”登顶GitHub热榜，分分钟写出万字形式主义大作
一.垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高. 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介 ...
- MySQL5.6.36 自动化安装脚本
背景 很好的朋友邱启明同学,擅长MySQL,目前任职某大型互联网业MySQL DBA,要来一套MySQL自动安装的Shell脚本,贴出来保存一些. 此版本为 MySQL 5.6.365 ###### ...
- python的遗传算法--Hello World入门篇
本系列文章代码取材于书籍<Genetic Algorithms with Python>,本人是在校电气专业的研究生,立志从事于Python相关的代码工作,具体什么方向还有待深究. 众所周 ...
- Nginx 配置整理
链接:nginx配置详细解析 1. C10k问题:无法同时并发超过(1w)客户端请求而出现的问题. nginx默认配置超过1w并发: 2.配置文件conf/nginx.conf (1)user www ...
- MQTT版本升级过程及源码解析
MQTT版本升级过程及源码解析 首先说一下为什么要写这篇文章呢,在我发现网上对MQTT的文章介绍实在太少了,可能也是使用这个的频率比较低吧!还有对问题的定位以及解决的方式和办法也太少了,所以特意写这篇 ...