-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. android招聘啦,美图秀秀欢迎你加入！

    前言 最近朋友公司招聘,美图秀秀大家一定很熟悉吧,欢迎你的加入. 了解相关更多技术以外的,可参考<除了敲代码,你还有什么副业吗?>,再往下看,今天给需要换工作或者还未找到工作的童鞋们谋一个 ...

  2. windows+mysql集群搭建-三分钟搞定集群

    注:本文来源:  陈晓婵   <  windows+mysql集群搭建-三分钟搞定集群   > 一:mysql集群搭建教程-基础篇 计算机一级考试系统要用集群,目标是把集群搭建起来,保证一 ...

  3. Confluence 6 管理插件和组件

    一个 组件(add-on)是与 Confluence 分开安装的功能,能够加强 Confluence 的功能和使用.插件(plugin)和 组件(add-on)这 2 个词通常是一起使用的. 一共有 ...

  4. nginx安装目录详解(针对centos)

  5. Android adb from work ---one

    Write in front,You need to know some information first fastboot -help or adb -help (You can view the ...

  6. vue element-UI 升级报错Cannot find module "element-ui/lib/theme-default/index.css"

    饿了么 用之前的版本 有些组件跟api 不一样了所以更新了最新的版本,发现 报一堆错误 主要错误是这个 Cannot find module "element-ui/lib/theme-de ...

  7. LeetCode（82）：删除排序链表中的重复元素 II

    Medium! 题目描述: 给定一个排序链表,删除所有含有重复数字的节点,只保留原始链表中 没有重复出现 的数字. 示例 1: 输入: 1->2->3->3->4->4- ...

  8. Nginx详解二十二：Nginx深度学习篇之Lua解释器安装及基础语法

    解释器 Lua:Lua是一个简洁.轻量.可扩展的脚本语言 Nginx+Lua优势充分的结合Nginx的并发处理epoll优势的Lua的轻量实现简单的功能切高并发的场景 安装Lua 1.安装解释器:yu ...

  9. Java接口自动化测试之Maven项目的创建(一)

    这里使用Idea创建Maven项目, 过程非常简单, 装好JDK和Idea 1. 安装完后,打开Idea, 选择File→New→Project, 如图 2. 选择maven, 点击Next, 如图 ...

  10. last与lastb命令 读取的日志文件

    在linux系统中,last与lastb命令用来列出目前与过去登录系统的用户相关信息.指令英文原义: last, lastb - show listing of last logged in user ...