-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. Java对数

    java对数 先看看Java源码里的对数函数(在Java.lang.Math里) 方法1:log() 作用:返回以自然常数e为底数的对数值 说明: e ≍ 2.71828 18284 59045 23 ...

  2. 自然语言处理之LCS最长公共子子序列

    #!一个序列S任意删除若干个字符得到的新序列T,则T叫做S的子序列 注意,这个和最长公共字串不一样,最长公共子串要求连续. 1.算法公式: def lcs(a,b): lena = len(a) le ...

  3. centos6.5 python命令行模式左右建无法使用

    我的虚拟机是centos6.5,自带python2.6:安装了Python2.7(安装了pip管理工具)后,在python2.7命令行模式下,左右键及退格键无法使用,基于以上情况,我进行了百度: 第一 ...

  4. Confluence 6 虚拟文件和文件夹

    在取消点赞事件中,你可能会遇到 WebDAV  客户端的问题或者不稳定的情况,你可以启用访问自动创建(虚拟)文件和文件夹. 备注: 在默认情况下,这个选项隐藏在 'WebDAV Configurati ...

  5. 微信小程序简单介绍 一

    一 组件及api网址: 组件 :https://developers.weixin.qq.com/miniprogram/dev/component/view.html api:https://dev ...

  6. 初识dubbo

    1. 为什么需要 Dubbo(摘自http://dubbo.apache.org/zh-cn/docs/user/quick-start.html) 随着互联网的发展,网站应用的规模不断扩大,常规的垂 ...

  7. tensorflow(1) 基础: 神经网络基本框架

    1.tensorflow 的计算得到的是计算图graph import tensorflow as tf a=tf.constant([1.0,2.0]) b=tf.constant([3.0,4.0 ...

  8. 20165314 2016-2017- 3《Java程序设计》第2周学习总结

    20165314 2016-2017- 3<Java程序设计>第2周学习总结 教材学习内容总结 byte<short<char<int<long<float& ...

  9. vue 中样式的绑定

    1.class的对象绑定 //对应的css <style> .active { color: red; } </style> <!--html 对应的代码--> & ...

  10. git push -u 用法

    在我们第一次提交git的时候: 发现上面用了这个-u参数,也没作解释,特意搜索了下这个-u的用法,加了参数-u后,以后即可直接用git push 代替git push origin master gi ...