首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3弹性盒模型开发笔记（二）

Posted in HTML / CSS onApril 26, 2016

本文为大家继续分享CSS3弹性盒模型开发笔记第二篇，之前一篇以及为大家引入了CSS3弹性盒模型的相关介绍，点击查看：CSS3弹性盒模型开发笔记（一）

box-flex属性

box-flex属性能够灵活地控制子元素在盒子中的显示空间。注意，显示空间包括子元素的宽度和高度，而不只是子元素所在栏目的宽度，也可以说是子元素在盒子中所占的面积。该属性在弹性布局中非常重要，它解决了传统设计中习惯使用百分比定义弹性布局的弊端。box-flex属性的基本语法：

box-flex:<number>

取值说明：

<number>属性值是一个整数或者小数。当盒子中包含多个定义了box-flex属性的子元素时，浏览器将会把这些子元素的box-flex属性值相加，然后根据他们各自的值占总值的比例来分配盒子剩余的空间。注意，box-flex属性只有在盒子拥有的确定的空间大小之后才能正确解析。在设计中，较稳妥的做法是为了盒子定义具体的width或height属性值。

实战体验：自适应栏目宽度设计

在传统的网页设计中，如果要把一个栏目分成三栏，比较简单的做法是把三个子元素的宽度都设置为33.3%。这种做法无法把父元素的宽度完全填充，当父元素的宽度足够大的时候，用户会看到未填充的空白区域。但是，如果为子元素设置了固定宽度值，弹性布局会变得更为复杂。如果使用box-flex属性，这个问题就会迎刃而解。

html代码：

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2. <h1><img src="images/web3_13.gif" /></h1>  
  3. <div id="box">  
  4.     <!--左侧栏目-->  
  5.     <div id="box1"><img src="images/web3_01.gif" /></div>  
  6.     <!--中间栏目-->  
  7.     <div id="box2">  
  8.         <h2><img src="images/web3_02.gif" /></h2>  
  9.         <div><img src="images/web3_04.gif" /></div>  
  10.         <div><img src="images/web3_05.gif" /></div>  
  11.         <div><img src="images/web3_06.gif" /></div>  
  12.         <div><img src="images/web3_07.gif" /></div>  
  13.     </div>  
  14.     <!--右侧栏目-->  
  15.     <div id="box3">  
  16.         <h2><img src="images/web3_12.gif" /></h2>  
  17.         <div><img src="images/web3_08.gif" /></div>  
  18.         <div><img src="images/web3_09.gif" /></div>  
  19.         <div><img src="images/web3_10.gif" /></div>  
  20.         <div><img src="images/web3_11.gif" /></div>  
  21.     </div>  
  22. </div>  
  23. </body>  

CSS3代码：

CSS Code复制内容到剪贴板
  1. /*这是一个三栏布局的页面，其中左侧栏目的宽度是固定的，而中间和右侧栏目的宽度是弹性的*/  
  2. <style>   
  3. body{   
  4.     margin:0;   
  5.     padding:0;   
  6.     text-align:center;   
  7. }   
  8. h1,h2{margin:2px;}   
  9. #box{   
  10.     margin:auto;   
  11.     text-align:left;   
  12.     width:1002px;   
  13.     overflow:hidden;   
  14. }   
  15. /*定义box元素盒形显示，并设置子元素水平布置*/  
  16. #box{   
  17.     display:box;   
  18.     display:-moz-box;   
  19.     display:-webkit-box;   
  20.     box-orient:horizontal;   
  21.     -moz-box-orient:horizontal;   
  22.     -webkit-box-orient:horizontal;     
  23. }   
  24. /*定义盒子左侧栏目的宽度为固定显示*/  
  25. #box1{width:201px;}   
  26. #box2,#box3{   
  27.     border:1px solid #CCC;   
  28.     margin:2px;    
  29. }   
  30. /*定义盒子内中间栏目的宽度为盒子剩余空间的2/3*/  
  31. #box2{   
  32.     box-flex: 4;   
  33.     -moz-box-flex: 4;   
  34.     -webkit-box-flex: 4;   
  35. }   
  36. /*定义盒子内中间栏目的宽度为盒子剩余空间的1/3*/  
  37. #box3{   
  38.     box-flex:2;   
  39.     -moz-box-flex:2;   
  40.     -webkit-box-flex:2;    
  41. }   
  42. #box2 div,#box3 div{   
  43.     display:inline;   
  44. }   
  45. </style>   
  46.   

演示效果：

CSS3弹性盒模型开发笔记（二）

弹性空间的实现和分配

  在默认情况下，子元素并不具有弹性，它会竟可能的宽，以便使其所包含的内容可见，并且不会有任何溢出。如果要改变它的尺寸，则可以使用width和height属性来实现，当然也可以使用min-height，min-width，max-height,max-width等属性来限制尺寸。

  当box-flex属性至少大于0时，它会变得富有弹性。当子元素具有弹性时，可以通过下面的方式来改变它的尺寸：

1、使用width，height，min-height，min-width，max-height,max-width等属性来定义尺寸。

2、使用盒子的尺寸来限制子元素的弹性尺寸。

3、借助盒子富余所有空间来限制元素的弹性尺寸。

  如果子元素没有声明大小，那么其尺寸将完全取决于盒子的大小，即子元素的大小等于盒子的大小乘以它的box-flex属性值在所有子元素的box-flex属性值总和中的百分比。使用公式表示如下：

子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和

如果一个或多个子元素声明了具体的尺寸，那么其大小将计入其中，余下的弹性盒子将按照上面的原则分享剩余的可利用空间。

由于受内部图片大小的支撑，导致子元素的空间总是大于盒子的 富余空间，这时将出现解析异常。

box-flex属性对子元素的布局影响

HTML代码：

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2. <h1><img src="images/web3_13.gif" /></h1>  
  3. <div id="box">  
  4.     <!--左侧栏目-->  
  5.     <div id="box1"><img src="images/web3_01.gif" /></div>  
  6.     <!--中间栏目-->  
  7.     <div id="box2"></div>  
  8.     <!--右侧栏目-->     
  9.     <div id="box3"></div>          
  10. </div>  
  11. </body>  
  12.   

中间和右侧各占一半剩余的空间

CSS3代码：

CSS Code复制内容到剪贴板
  1. #box2{   
  2.     box-flex: 2;   
  3.     -moz-box-flex: 2;   
  4.     -webkit-box-flex: 2;   
  5.     background:#CCF;   
  6. }   
  7. #box3{   
  8.     box-flex: 2;   
  9.     -moz-box-flex: 2;   
  10.     -webkit-box-flex: 2;   
  11.     background:#FC0;   
  12. }   
  13.   

演示效果：

CSS3弹性盒模型开发笔记（二）

中栏占1/5的空余空间，右栏占4/5空余的空间

CSS3代码：

CSS Code复制内容到剪贴板
  1. #box2{   
  2.     box-flex: 0.5;   
  3.     -moz-box-flex: 0.5;   
  4.     -webkit-box-flex: 0.5;   
  5.     background:#CCF;   
  6. }   
  7. #box3{   
  8.     box-flex: 2;   
  9.     -moz-box-flex: 2;   
  10.     -webkit-box-flex: 2;   
  11.     background:#FC0;   
  12. }   
  13.   

演示效果：

CSS3弹性盒模型开发笔记（二）

中间弹性显示，占据所有空余空间，右栏固定大

CSS3代码：

CSS Code复制内容到剪贴板
  1. #box2{   
  2.     box-flex: 0.5;   
  3.     -moz-box-flex: 0.5;   
  4.     -webkit-box-flex: 0.5;   
  5.     background:#CCF;   
  6. }   
  7. #box3{   
  8.     width:196px;   
  9.     background:url(images/web3_03.gif) no-repeat;   
  10. }   
  11.   

演示效果：

CSS3弹性盒模型开发笔记（二）

中栏失去弹性（当设置为0或者复制时），收缩显示为一条线，右栏自动左移

CSS代码：

CSS Code复制内容到剪贴板
  1. #box2{   
  2.     box-flex: 0;   
  3.     -moz-box-flex: 0;   
  4.     -webkit-box-flex: 0;   
  5.     background:#CCF;   
  6. }   
  7. #box3{   
  8.     width:196px;   
  9.     background:url(images/web3_03.gif) no-repeat;   
  10. }   
  11.   

演示效果：

CSS3弹性盒模型开发笔记（二）

以上就是本文的全部内容，希望对大家学习CSS3弹性盒模型有所帮助。

CSS3弹性盒模型开发笔记（二）

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 HTML / CSS
CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义
Apr 26 #HTML / CSS
纯CSS3代码实现文字描边
Apr 25 #HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 #HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 #HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 #HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 #HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 #HTML / CSS
explain(2) 观后感(479) 西索(1) HAM-2000(1) 波段(1) 城市猎人(1) 申请书(21) 实用文书(952) AngularJS(2) 文书(291)
You might like
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
php反射应用示例
2014/02/25 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
详解AngularJS2 Http服务
2017/06/26 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
详解JWT token心得与使用实例
2019/08/02 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
如何在django中运行scrapy框架
2020/04/22 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
美国玛丽莎收藏奢华时尚商店：Marissa Collections
2016/11/21 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
建筑系毕业生自我鉴定
2014/01/24 职场文书
年度考核自我鉴定
2014/02/02 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
七一建党节慰问信
2015/02/14 职场文书
教师继续教育反思周记
2015/06/25 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL
python数字图像处理之图像的批量处理
2022/06/28 Python