-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. 信息摘要算法之二：SHA1算法分析及实现

    SHA算法,即安全散列算法(Secure Hash Algorithm)是一种与MD5同源的数据加密算法,该算法经过加密专家多年来的发展和改进已日益完善,现在已成为公认的最安全的散列算法之一,并被广泛 ...

  2. 《MySQL5.7从入门到精通(视频教学版)》

    · 一:书籍PDF获取途径 pdf 文档 在 此QQ群(668345923) 的群文件里面 学习视频资源 二:书籍介绍 本书主要包括MySQL的安装与配置.数据库的创建.数据表的创建.数据类型和运算符 ...

  3. 洛谷P2014 选课

    首先分析题目,这是一道树形dp的题目,是树形背包类的问题,以为每门课的先修课只有一门,所以这一定可以 构成一个森林结构,于是我们可以设计一个虚拟的根节点作为森林的根. 状态转移方程如下 dp[v][k ...

  4. PLC漏洞问题

    1.PLC采用大多是经过裁剪的实时操作系统,比如像linux RT.QNX.VxWorks等,这些实时操作系统广泛应用在通信.军事.航天.等工程领域,但是随之工业与网络的互连爆发出很多问题,常见的PL ...

  5. python 之 列表与字典

    1.4 列表与字典 列表与字典,这两种类型,都是各种类型的集合,以列表为例,如果列表中包含列表,就形成嵌套. 这两种类型几乎是所有python脚本的主要工作组件 . 这种结构信息是可变的可修改的.不像 ...

  6. 论文阅读笔记二十二：End-to-End Instance Segmentation with Recurrent Attention（CVPR2017）

    论文源址:https://arxiv.org/abs/1605.09410 tensorflow 代码:https://github.com/renmengye/rec-attend-public 摘 ...

  7. Android 第一波

    1. Devik进程,Linux进程,线程的区别 说一说对 SP 频繁操作有什么后果? SP 能存储多少数据? SP 的底层其实是由xml文件来实现的,操作 SP 的过程其实就是xml的序列化和反序列 ...

  8. （转）HTTPS到底是个啥玩意儿？

    详细见:https://blog.csdn.net/zgwangbo/article/details/50889623 ,建立交互的过程见下图:

  9. Ubuntu16.04安装vim8

    Ubuntu16.04安装vim8 在Ubuntu16.04下编译安装vim8,并配置vim-plug插件管理器,以及安装YouCompleteMe等插件. 安装依赖 sudo apt-get ins ...

  10. [转] Mongoose简要API

    Mongoose是在node.js环境下对mongodb进行便捷操作的对象模型工具 因此,要使用mongoose,则必须安装node.js环境以及mongodb数据库.mongoose使mongodb ...