-webkit-box-ordinal-group: 2;1。。。布局优先显示

display: -webkit-box;盒子

-webkit-box-orient:horizontal;显示方式

-webkit-box-flex: 1;盒子多少显示，数字显示的大小

<html>
<head>
<title></title>
<style type="text/css">
body{
display: -webkit-box;
-webkit-box-orient:horizontal;
width: 100%;
}
#box1{
background-color: red;
width: 100px;
-webkit-box-ordinal-group: 2;
}
#box2{
background-color: black;
-webkit-box-flex: 1;
-webkit-box-ordinal-group: 2;
}

</style>
</head>
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</body>
</html>

css3流动布局的更多相关文章

  1. CSS3 Flex布局整理(二)-容器属性

    一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...

  2. CSS3 & 页面布局

    相关链接 视频链接: CSS3 & 页面布局 CSS3与页面布局学习总结(一) CSS3与页面布局学习总结(二) CSS3与页面布局学习总结(三) CSS3与页面布局学习总结(四) CSS3与 ...

  3. 12个学习 CSS3 网站布局设计的优秀案例

    网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...

  4. Bootstrap页面布局3 - BS布局以及流动布局

    1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...

  5. [转]使用CSS3 Grid布局实现内容优先

    使用CSS3 Grid布局实现内容优先  http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...

  6. CSS3 伸缩布局盒模型记

    CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...

  7. 转:CSS3 Flexbox 布局介绍

    转:CSS3 Flexbox 布局介绍 Flexbox是一个用于页面布局的全新CSS3模块功能.它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间.较为复杂的布 ...

  8. 【repost】CSS3弹性布局

    本文导读:在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理.使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据 ...

  9. CSS3 Flex布局整理(三)-项目属性

    一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...

随机推荐

  1. 开发了5年android，我开始了go学习之旅

    前言 做了近5年的android开发,最近项目也是不怎么忙,空闲的时候总会思考一些事情,不过作为移动开发,我个人觉得很有必要学习后台开发,由于公司是Go语言开发的,了解go语言一段时间后,我发现go语 ...

  2. Confluence 6 禁用或者重新启用一个任务

    在默认的情况下,所有的 Confluence 计划任务都是默认启用的. 使用 启用(Disable )/ 禁用(Enable )连接操作来启用和禁用每一个计划任务. 不是所有的加护任务都可以被禁用的. ...

  3. Confluence 6 升级自定义的站点和空间获得你的自定义布局

    我们建议你在对站点进行布局修改的时候,你需要为你修改的 Confluence 站点或空间布局保留所有的修改记录. 如果没有的话,你应该可以通过下面的办法找到你的自定义修改.这个方法将会把你对全部网站和 ...

  4. 恢复误删的DB table数据

    由于一时手误输入了 DELETE FROM TABLE WHERE age REGEXP '\d';导致这个表的数据被删除 解决方法: 登录mysql,查看目前的binlog文件 mysql> ...

  5. mysql中有多种存储引擎，每种引擎都有自己的特色

    mysql中有多种存储引擎,每种引擎都有自己的特色. 用途: MyISAM:快读, Memory:内存数据, InnoDB:完整的事务支持 锁: MyISAM:全表锁定, Memory:全表锁定, I ...

  6. Winhex数据恢复笔记（五）

    一.上次介绍了Windows API函数,这次对Windows API函数的参数做个笔记 1.IpFileName:  文件名指针,也可指向 MS-Dos设备名,同时支持文件和设备名,函数分为两个版本 ...

  7. WinHex数据恢复笔记（一）

    WinHex数据恢复功能强大,可以从硬件簇上扇区进行数据扫描恢复.首先对winhex的各个功能介绍.之后对实例记录一个Word文档删除后进行恢复. 1.WinHex数据恢复软件的编辑区输入与其他普通文 ...

  8. Linux----centos安装mysql

    第一步wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 第二步rpm -ivh mysql-community-r ...

  9. bzoj 1856

    做这题之前先看道高考真题(好像是真题,我记不清了) 例:已知一个由n个0和n个1排列而成的数列,要求对于任意k∈N*且k∈[1,2n],在前k个数中1的个数不少于0的个数,求当n=4时这样的数列的数量 ...

  10. python+selenium滑动式验证码解决办法

    from selenium.webdriver import ActionChains action = ActionChains(driver) source=driver.find_element ...