-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. vuex——做简单的购物车功能

    购物车组件 <template> <div> <h1>vuex-shopCart</h1> <div class="shop-listb ...

  2. est是基于less的样式工具库

    网址:http://ecomfe.github.io/est/ 此处HTML中如果直接引用less就会报错! est 如果直接引用less和js 是会报错的 样式规范:https://www.zybu ...

  3. java 实现往oracle存储过程中传递array数组类型的参数

    注:本文来源于 <  java 实现往oracle存储过程中传递array数组类型的参数  >最近项目中遇到通过往存储过程传递数组参数的问题, 浪费了N多个小时,终于有点头绪. 具体的代码 ...

  4. Confluence 6 MySQL 测试你的数据库连接

    在你的数据库设置界面,有一个 测试连接(Test connection)按钮可以检查: Confluence 可以连接你的数据库服务器 数据库字符集,隔离级别和存储引擎是正确的 你的数据库用户有正确的 ...

  5. x学生管理系统（用中间件）-------基于FORM组件

    目的:实现学生,老师,课程的增删改查 models.py from django.db import models # Create your models here. class UserInfo( ...

  6. java基础概念整理（三）

    1.对象的上转型 对象的上转型不能调用和使用子类对象新增的成员和变量,不能调用子类新增的方法. 上转型对象可以访问子类继承或者隐藏的成员变量,也可以调用子类继承或者子类重写的实例方法.因此如果子类重写 ...

  7. java测试

    //信1705-1 20173527 刘津鑫package money;import java.io.IOException;import java.io.Serializable;import ja ...

  8. 怎么加密接口防止，API外部调用？

    服务器端与客户端各自会存储一个TOKEN,这个TOKEN我们为了防止反编译是用C语言来写的一个文件并做了加壳和混淆处理.在客户端访问服务器API任何一个接口的时候,客户端需要带上一个特殊字段,这个字段 ...

  9. SSM + Android 网络文件上传下载

    SSM + Android 网络交互的那些事 2016年12月14日 17:58:36 ssm做为后台与android交互,相信只要是了解过的人都知道一些基本的数据交互,向json,对象,map的交互 ...

  10. Python内置模块之random

    random的方法有 random.random # 返回一个随机的小数 ramdom.uniform # 按照一个区间返回一个小数 random.randint # 返回一个整数 random.ra ...