CSS3 弹性盒模型 box-flex
说明:本文档兼容性测试基础环境为:windows系统;IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
语法:
box-flex:<number>
默认值:0
取值:
- <number>:
- 使用浮点数指定对象所分配其父元素剩余空间的比例。
说明:
示例:将一个容器分成6份,子对象a分1份,b分2份,c分3份
HTML Code:
<ul id="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
CSS Code:
#box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;}
#box li:nth-child(1){box-flex:1;}
#box li:nth-child(2){box-flex:1;}
#box li:nth-child(3){box-flex:2;}
上面代码请自行加上-moz-,-webkit-之类的。box-flex生效需定义其父元素display为box或inline-box
误区:注意box-flex只是动态分配父元素的剩余空间,而不是整个父元素的空间。如上例,父元素#box的宽度为240px,如果你认为a,b,c的 宽度分别为60, 60, 120那么就错了,因为box-flex只是分配父元素的剩余空间而已,所以a,b,c所分到的应该是除内容外所剩余下来的宽度
为了清晰所谓的剩余空间分配,对上例稍作修改,HTML Code不变
CSS Code:
#box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;}
.box li{width:50px;padding:7px;}
#box li:nth-child(1){box-flex:1;}
#box li:nth-child(2){box-flex:1;}
#box li:nth-child(3){box-flex:2;}
从上面的代码,我们可以知道a,b,c的宽度分别为50+7*2=64px,三者加起来即 192px,所以剩下的240-192=48px才是父元素的剩余空间,于是a,b,c按照设定的1:1:2来分配这48px,a分得12px,b分得 12px,c分得24px,所以最终a=64+12=76px,b=64+12=76px,c=64+24=88px
对应的脚本特性为boxFlex。
兼容性:
示例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>box-flex_CSS参考手册_web前端开发参考手册系列</title>
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
.box{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;background:#000;width:240px;height:100px;margin:0;padding:10px;list-style:none;vertical-align:top;}
#box li:nth-child(1){-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;background:#666;}
#box li:nth-child(2){-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;background:#999;}
#box li:nth-child(3){-webkit-box-flex:2;-moz-box-flex:2;-o-box-flex:2;-ms-box-flex:2;box-flex:2;background:#ccc;}
</style>
</head>
<body>
<h1>box-flex示例:</h1>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>
CSS3 弹性盒模型 box-flex的更多相关文章
- CSS3弹性盒模型,Flex布局教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...
- css3弹性盒模型flex快速入门与上手(align-content与align-items)
接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...
- CSS3弹性盒模型flexbox布局基础版
原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...
- CSS3弹性盒模型布局模块介绍
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
- css3基础教程:CSS3弹性盒模型
今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...
- CSS3弹性盒模型新版和老版写法差异
1.在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box: 新版弹性盒模型:flex:display : flex 老版弹性盒模型:box : disp ...
- css和css3弹性盒模型实现元素宽度(高度)自适应
一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...
- (转)详解css3弹性盒模型(Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
- css3弹性盒模型
一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...
- CSS3弹性盒模型flexbox完整版教程
http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...
随机推荐
- 关于hadoop集群管理系统搭建的规划说明
Hadoop集群管理系统搭建是每个入门级新手都非常头疼的事情,因为你可能花费了很久的时间在搭建运行环境,最终却不知道什么原因无法创建成功.但对新手来说,运行环境搭建不成功的概率还蛮高的. 在之前的分享 ...
- listener does not currently know of 。。。。
打开Oracle的 listener.ora 文件: (../oracle/product/10.2.0/db_1/network/admin/listener.ora) 设置环境变量: Oracle ...
- PHP中文件类型 文件属性 路径以及 文件相关的函数
一: 文件类型判断: 1.is_dir() 判断是不是目录 2.is_file() 判断是不是文件 3.is_executable() 判断是不是可执行文件 4.is_readable() 判断是 ...
- push is not a function
push is not a function 今天写js 碰上了这个问题 找了半天百度不得其解. 后来发现,我push的是一个对象 push数组才可以
- spring eureka required a bean of type 'com.netflix.discovery.DiscoveryClient' that could not be found.
spring在集成第三方过程很容易出现类名相同,且基本作用相同的类.这样给初学者带来一定的困惑. 导致用错类而出现以下问题. required a bean of type 'com.netflix. ...
- 导入wordpress数据库到mysql报错
mysql字符集编码错误的导入数据会提示错误了,这个和插入数据一样如果保存的数据与mysql编码不一样那么肯定会出现导入乱码或插入数据丢失的问题,下面我们一起来看一个例子. 恢复数据库报错:由于字符集 ...
- windows下elasticsearch配置及spring boot 简单demod的 整合
学习过程: elasticsearch 下载安装 elasticsearch-head 安装 spring boot 下elasticsearch的配置 使用ElasticsearchReposito ...
- maven学习(2)-在Eclipse 中使用Maven
第一节:m2eclipse 插件安装 打开Eclipse,点击菜单Help - > Install New Software 点击Add 按钮Name:m2e location: http:// ...
- 发送邮件(单独文字)的方法(网易邮箱 OR QQ邮箱)
# coding:utf-8import smtplibfrom email.mime.text import MIMEText # 发邮件相关的参数# 网易邮箱用这个# smtpserver=&qu ...
- 深入浅出 JIT 编译器
转载 https://www.ibm.com/developerworks/cn/java/j-lo-just-in-time/ JIT 编译器在运行程序时有两种编译模式可以选择,并且其会在运行时决定 ...