图解CSS3之弹性盒模型篇（display:box / display:inline-box）
2015-05-28 12:31 ARMdong 阅读(727) 评论(0) 编辑 收藏 举报CSS3弹性盒模型
现在有这样一个场景，外层一个大div，高度为100px，padding为10px，边框为10px,黑色实线，宽度随着body走，div背景色为白色；大div里面排布着5个小div，每个小div的宽度为100px，高度也为100px,边框为1px白色实线，要求里面的div按照水平方向依次排开。传统的css2.1中我们毫无疑问会使用float:left或者inline-block来实现水平分布，以float为例，下面贴上代码：
HTML结构：
1 <div class="box"> 2 <div>1</div> 3 <div>2</div> 4 <div>3</div> 5 <div>4</div> 6 <div>5</div> 7 </div>
CSS样式：
.box { height:100px; padding:10px; border:10px solid #000; background:#fff; }
.box div { width:100px; height:100px; border:1px solid #fff; background:#d90000; font:bold 24px/100px arial; color:#fff; text-align:center; }
浏览器显示效果：（图例一）
接着，我们让里面的5个小div按照水平方向排布，CSS代码如下：
.box div { width:100px; height:100px; border:1px solid #fff; background:#d90000; font:bold 24px/100px arial; color:#fff; text-align:center; float:left; }
我们给每个div新增了一条float:left;的样式，从而使div在水平方向上依次排开，如下图所示：（图例二）
同样的结构，我们用CSS3提供的弹性盒模型来实现这个效果：
CSS代码：
.box { height:100px; padding:10px; border:10px solid #000; background:#fff;
display:-moz-box;
display:-webkit-box;
display:box;
}
.box div { width:100px; height:100px; border:1px solid #fff; background:#d90000; font:bold 24px/100px arial; color:#fff; text-align:center; }
加上上面几句代码，同样能实现图例二的效果，这里就不重复贴图了。
说到这里我们可能会郁闷了，使用浮动貌似代码量更少，而且不用使用私有前缀。下面我们就开始探索使用弹性盒子模型的好处吧！
工欲善其事必先利其器
注意：在使用弹性盒子模型的时候，父元素必须加上display:box 或者 display:inline-box ；
毕竟属于CSS3的东西，目前而言，仅Firefox/Chrome/Safari浏览器支持弹性盒子模型（IE9不详，Opera尚未），且使用的时候，需要附带私有前缀。就是诸如-moz-, -webkit-之类。
1、box-orient : 定义盒模型的布局方向
horizontal : 水平方向显示（默认）
vartical : 垂直方向显示
2、box-direction : 定义元素排序方式
normal : 正序（默认）
reverse : 反序
我们来看看反序排序的效果，为了代码简洁，所有示例只在chrome下测试；
CSS代码：
.box { height:100px; padding:10px; border:10px solid #000; background:#fff;
display:-webkit-box;
-webkit-box-direction:reverse;
}
看看效果：（图例三）
3、box-ordinal-group : 定义每个元素的具体位置
例如：
原来div1 -> 3 的位置
原来div2 -> 4 的位置
原来div3 -> 1 的位置
原来div4 -> 5 的位置
原来div5 -> 3 的位置
CSS代码：
.box { height:100px; padding:10px; border:10px solid #000; background:#fff;
display:-webkit-box;
}
.box div { width:100px; height:100px; border:1px solid #fff; background:#d90000; font:bold 24px/100px arial; color:#fff; text-align:center; }
.box div:nth-of-type(1) { -webkit-box-ordinal-group:3; }
.box div:nth-of-type(2) { -webkit-box-ordinal-group:4; }
.box div:nth-of-type(3) { -webkit-box-ordinal-group:1; }
.box div:nth-of-type(4) { -webkit-box-ordinal-group:5; }
.box div:nth-of-type(5) { -webkit-box-ordinal-group:2; }
贴上效果图：（图例四）
4、box-flex : 定义盒子的弹性空间
计算公式：
子元素的尺寸 = 盒子的尺寸 * 子元素的box-flex属性值/所有子元素的box-flex属性值的和
如果其中某个元素有固定值，那么计算公式：
子元素的尺寸 = ( 盒子的尺寸 - 固定值 ) * 子元素的box-flex属性值/所有子元素的box-flex属性值的和
例如，见CSS代码：
.box { height:100px; padding:10px; border:10px solid #000; background:#fff;
display:-webkit-box;
}
.box div { width:100px; height:100px; border:1px solid #fff; background:#d90000; font:bold 24px/100px arial; color:#fff; text-align:center; }
.box div:nth-of-type(1) { -webkit-box-flex:1; }
.box div:nth-of-type(2) { -webkit-box-flex:2; }
.box div:nth-of-type(3) { -webkit-box-flex:3; }
.box div:nth-of-type(4) { -webkit-box-flex:4; }
.box div:nth-of-type(5) { -webkit-box-flex:5; }
效果图如下：（图例五）
接着，我们将第一个子div的宽度固定，其它的还按照原来的比例。
CSS代码：
.box { height:100px; padding:10px; border:10px solid #000; background:#fff;
display:-webkit-box;
}
.box div { width:100px; height:100px; border:1px solid #fff; background:#d90000; font:bold 24px/100px arial; color:#fff; text-align:center; }
.box div:nth-of-type(1) { width:300px; }
.box div:nth-of-type(2) { -webkit-box-flex:2; }
.box div:nth-of-type(3) { -webkit-box-flex:3; }
.box div:nth-of-type(4) { -webkit-box-flex:4; }
.box div:nth-of-type(5) { -webkit-box-flex:5; }
效果图如下：（图例六）
5、box-pack : 对盒子富余空间进行管理
start: 所有子元素在盒子左侧显示，富余空间分布在右侧；
CSS代码：
.box { height:100px; padding:10px; border:10px solid #000; background:#fff;
display:-webkit-box;
-webkit-box-pack:start;
}
.box div { width:100px; height:100px; border:1px solid #fff; background:#d90000; font:bold 24px/100px arial; color:#fff; text-align:center; }
效果图（图例七）：
end: 所有子元素在盒子右侧显示，富余空间分布在左侧；
CSS代码：
.box { height:100px; padding:10px; border:10px solid #000; background:#fff;
display:-webkit-box;
-webkit-box-pack:end;
}
效果图（图例八）：
center: 所有子元素居中显示，富余空间平均分布在左右两侧；
CSS代码：
.box { height:100px; padding:10px; border:10px solid #000; background:#fff;
display:-webkit-box;
-webkit-box-pack:center;
}
效果图（图例九）：
justify: 富余空间在子元素中平均分布；
CSS代码：
.box { height:100px; padding:10px; border:10px solid #000; background:#fff;
display:-webkit-box;
-webkit-box-pack:justify;
}
效果图（图例十）：
6、box-align : 在垂直方向上对元素的位置进行管理
示例：这里我们修改下外层大div的高度，我们设置成200px;
start: 所有子元素垂直居上显示
CSS代码：
.box { height:200px; padding:10px; border:10px solid #000; background:#fff;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:start;
}
效果图（图例十一）：
end: 所有子元素垂直居下显示
CSS代码：
.box { height:200px; padding:10px; border:10px solid #000; background:#fff;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:end;
}
效果图（图例十二）：
center: 所有子元素垂直居中显示
CSS代码：
.box { height:200px; padding:10px; border:10px solid #000; background:#fff;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
效果图（图例十三）：
好了，弹性盒模型的属性就介绍到这里，有没有感觉到高大上？下面我们来看看几个工作中遇到的几个示例；
下面我们来看看几道面试题：
1、不使用javascript前提下：一个未知宽高的块元素如何在屏幕中水平垂直居中？
2、不使用javascript前提下：三列布局，中间宽度固定，两侧宽度自适应屏幕？
3、不使用javascript前提下：三列布局，中间宽度自适应屏幕，两侧宽度固定？
利用CSS3的弹性盒模型特性，上面的问题是不是很容易解决呢？
