css3弹性盒模型实例介绍


Posted in HTML / CSS onMay 27, 2013

Css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML 、GladeXML。使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码:

复制代码
代码如下:

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

传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序,也可以反转之。要开启弹性盒模型,只需设置拥有子盒子的盒子的display的属性值为box(或inline-box)即可。
display: box;
水平或垂直分布
“box-orient”定义分布的坐标轴:vertical和horizional。这两个值定义盒子如何显示,
复制代码
代码如下:

body{
display: box;
box-orient: horizontal;
}

css3弹性盒模型实例介绍 
反向分布
“box-direction”可以设置盒子出现的顺序。默认情况下,只需定义分布坐标轴——box随html流分布。如果为水平坐标轴,则从左到右分布;垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”,则反转盒子的排列顺序。
复制代码
代码如下:

body {
display: box;
box-orient: vertical;
box-direction: reverse;
}

css3弹性盒模型实例介绍
具体分布
属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义,盒模型将首先分布这些组,所有这些盒子将在每个组中。分布将从小到大排列。
复制代码
代码如下:

body {
display: box;
box-orient: vertical;
box-direction : reverse;
}
#box1 {box-flex:1;box-ordinal-group: 2;}
#box2 {box-flex:2;box-ordinal-group: 2;}
#box3 {box-flex:2;box-ordinal-group: 1;}

盒子尺寸
默认情况下,盒子并不具有弹性,如果box-flex的属性值至少为1时,则变得富有弹性。box-flex如何对父容器的宽度进行划分,三个子块分别设置了1、2、2,也就是把这个父容器分成5份,分别占据了父结构宽度的1/5(100px)、2/5(200px)、2/5(200px)。如果盒子不具有弹性,它将尽可能的宽使其内容可见,且没有任何溢出,其大小由“width”和“height”来决定(或min-height、min-width、max-width、max-height)。
HTML / CSS 相关文章推荐
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 #HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 #HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 #HTML / CSS
CSS3——齿轮转动关键代码
May 02 #HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 #HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 #HTML / CSS
CSS3 绘制BMW logo实的现代码
Apr 25 #HTML / CSS
You might like
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
可选择和输入的下拉列表框示例
2013/11/05 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
js打造数组转json函数
2015/01/14 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
jQuery操作css样式
2017/05/15 jQuery
Node.js编写CLI的实例详解
2017/05/17 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
Python 模拟登陆的两种实现方法
2017/08/10 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
Python属性和内建属性实例解析
2020/01/14 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
《都江堰》教学反思
2014/02/07 职场文书
低碳生活倡议书
2014/04/14 职场文书
2014年度考核工作总结
2014/12/24 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
《观察物体》教学反思
2016/02/17 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android
Python OpenGL基本配置方式
2022/05/20 Python