搜索
热搜： Python 编程 PHP vue dedecms
首页> 前端开发 > Css3 > 正文

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

发布时间：2023-01-14 15:55:00 来源：网络
.
看淡拥有，不刻意追求某些东西，落叶归根，那些属于你的，总会回来。劳动的意义不仅在于追求业绩，更在于完善人的心灵。

本文为大家继续分享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><imgsrc="images/web3_13.gif"/></h1>
  3. <divid="box">
  4. <!--左侧栏目-->
  5. <divid="box1"><imgsrc="images/web3_01.gif"/></div>
  6. <!--中间栏目-->
  7. <divid="box2">
  8. <h2><imgsrc="images/web3_02.gif"/></h2>
  9. <div><imgsrc="images/web3_04.gif"/></div>
  10. <div><imgsrc="images/web3_05.gif"/></div>
  11. <div><imgsrc="images/web3_06.gif"/></div>
  12. <div><imgsrc="images/web3_07.gif"/></div>
  13. </div>
  14. <!--右侧栏目-->
  15. <divid="box3">
  16. <h2><imgsrc="images/web3_12.gif"/></h2>
  17. <div><imgsrc="images/web3_08.gif"/></div>
  18. <div><imgsrc="images/web3_09.gif"/></div>
  19. <div><imgsrc="images/web3_10.gif"/></div>
  20. <div><imgsrc="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:1pxsolid#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. #box2div,#box3div{
  43. display:inline;
  44. }
  45. </style>

演示效果：

弹性空间的实现和分配

  在默认情况下，子元素并不具有弹性，它会竟可能的宽，以便使其所包含的内容可见，并且不会有任何溢出。如果要改变它的尺寸，则可以使用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><imgsrc="images/web3_13.gif"/></h1>
  3. <divid="box">
  4. <!--左侧栏目-->
  5. <divid="box1"><imgsrc="images/web3_01.gif"/></div>
  6. <!--中间栏目-->
  7. <divid="box2"></div>
  8. <!--右侧栏目-->
  9. <divid="box3"></div>
  10. </div>
  11. </body>

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

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. }

演示效果：

中栏占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. }

演示效果：

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

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. }

演示效果：

中栏失去弹性（当设置为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. }

演示效果：

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

标签：
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图