图解CSS3之弹性盒模型篇（display:box / display:inline-box）

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的弹性盒模型特性，上面的问题是不是很容易解决呢？

 

转载于:https://www.cnblogs.com/ARMdong/articles/4535581.html