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

作者：佚名字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含css3弹性盒模型,css3弹性盒布局,css3弹性盒,css3弹性盒子模型,css3弹性布局等相关知识,佚名希望在学习及工作中可以帮助到您

本文为大家继续分享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代码：

</div>

<body>
<h1><img src="images/web3_13.gif" /></h1>
<div id="box">
<div id="box1"><img src="images/web3_01.gif" /></div>
<div id="box2">
<h2><img src="images/web3_02.gif" /></h2>
<div><img src="images/web3_04.gif" /></div>
<div><img src="images/web3_05.gif" /></div>
<div><img src="images/web3_06.gif" /></div>
<div><img src="images/web3_07.gif" /></div>
</div>
<div id="box3">
<h2><img src="images/web3_12.gif" /></h2>
<div><img src="images/web3_08.gif" /></div>

您可能想查找下面的文章:

2017-08-02CSS3动画特效
2017-06-02利用CSS3实现圆角的outline效果的教程
2017-06-02CSS3弹性盒模型开发笔记（三）
2017-06-02css3让div随鼠标移动而抖动起来
2017-06-02CSS3中设置3D变形的transform-style属性详解
2017-06-02css3 图片圆形显示如何CSS将正方形图片显示为圆形图片布局
2017-06-02CSS3实现精美横向滚动菜单按钮
2017-06-02详解CSS3阴影 box-shadow的使用和技巧总结
2017-06-02css3动画效果小结(推荐)
2017-06-02CSS3转换功能transform主要属性值分析及实现分享

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

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容