弹性盒模型案例讲解
2017-07-06 本文已影响82人
行走的巨象
弹性盒模型的设置的方法为display:box 或display:inline-box
box-orient 为定义盒模型的布局方向,由于盒模型的只有在webkit或moz的内核才生效，故我们在使用这个属性之前要在它前面加上-webkit-或-moz-
box-orient的属性值有horizontal(水平)，vertical（垂直）
下方代码是块状元素水平排列的，大家可以自己尝试一下改为垂直排列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 900px;
height: 600px;
border: 1px solid #CCCCCC;
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.box div{
text-align: center;
margin: 10px;
width: 100px;
height: 100px;
line-height: 100px;
color: #FFFFFF;
background: #00A72B;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
css3_box1.png
box-direction 为元素的排列顺序，属性值normal表示正序，reverse表示反序
<style>
.box{
width: 800px;
height: 600px;
border: 1px solid #CCCCCC;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse; /*元素排列顺序*/
}
.box div{
text-align: center;
margin: 10px;
width: 100px;
height: 100px;
line-height: 100px;
color: #FFFFFF;
background: #00A72B;
}
</style>
css3_box2.png
box-ordinal-group 设置元素的具体位置
<style>
.box{
width: 800px;
height: 600px;
border: 1px solid #CCCCCC;
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.box div{
text-align: center;
margin: 10px;
width: 100px;
height: 100px;
line-height: 100px;
color: #FFFFFF;
background: #00A72B;
}
.box div:nth-of-type(6){ /*把第六个div放到第一位，以此类推*/
-webkit-box-ordinal-group: 1;
}
.box div:nth-of-type(5){
-webkit-box-ordinal-group: 2;
}
.box div:nth-of-type(4){
-webkit-box-ordinal-group: 3;
}
.box div:nth-of-type(1){
-webkit-box-ordinal-group: 6;
}
.box div:nth-of-type(2){
-webkit-box-ordinal-group: 5;
}
.box div:nth-of-type(3){
-webkit-box-ordinal-group: 4;
}
</style>
box-flex 定义盒子的弹性空间
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
<style>
.box{
width: 800px;
height: 600px;
border: 1px solid #CCCCCC;
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.box div{
text-align: center;
margin: 10px;
width: 100px;
height: 100px;
line-height: 100px;
color: #FFFFFF;
background: #00A72B;
}
.box div:nth-of-type(1){
-webkit-box-flex: 1; /*如果所有数字都一样,则横向平均分布*/
}
.box div:nth-of-type(2){
-webkit-box-flex: 1;
}
.box div:nth-of-type(3){
-webkit-box-flex: 1;
}
.box div:nth-of-type(4){
-webkit-box-flex: 1;
}
.box div:nth-of-type(5){
-webkit-box-flex: 1;
}
.box div:nth-of-type(6){
-webkit-box-flex: 1;
}
</style>
css3_box3.png
<style>
.box{
width: 800px;
height: 600px;
border: 1px solid #CCCCCC;
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.box div{
text-align: center;
margin: 10px;
height: 100px;
line-height: 100px;
color: #FFFFFF;
background: #00A72B;
}
.box div:nth-of-type(1){
-webkit-box-flex: 1; /*占整体1/9*/
}
.box div:nth-of-type(2){ /*占整体1/9*/
-webkit-box-flex: 1;
}
.box div:nth-of-type(3){ /*此div占整体5/9*/
-webkit-box-flex: 5;
}
.box div:nth-of-type(4){ /*占整体1/9*/
-webkit-box-flex: 1;
}
.box div:nth-of-type(5){ /*占整体1/9*/
-webkit-box-flex: 1;
}
</style>
css3_box4.png
box-pack 对盒子富裕的空间进行管理
start 所有子元素在盒子左侧显示，富裕空间在右侧
end 所有子元素在盒子右侧显示，富裕空间在左侧
center 所有子元素居中
justify 富余空间在子元素之间平均分布
以下案例只展示center和justify,其余请自行尝试
<style>
.box{
width: 800px;
height: 600px;
border: 1px solid #CCCCCC;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
}
.box div{
text-align: center;
width: 100px;
margin: 10px;
height: 100px;
line-height: 100px;
color: #FFFFFF;
background: #00A72B;
}
</style>
css3_box5.png
<style>
.box{
width: 800px;
height: 600px;
border: 1px solid #CCCCCC;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: justify;
}
.box div{
text-align: center;
width: 100px;
margin: 10px;
height: 100px;
line-height: 100px;
color: #FFFFFF;
background: #00A72B;
}
</style>
css3_box6.png
box-align 在垂直方向上对元素的位置进行管理
start 所有子元素在据顶
end 所有子元素在据底
center 所有子元素居中
<style>
.box{
width: 800px;
height: 600px;
border: 1px solid #CCCCCC;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: center;
}
.box div{
text-align: center;
width: 100px;
margin: 10px;
height: 100px;
line-height: 100px;
color: #FFFFFF;
background: #00A72B;
}
</style>
css3_box7.png
让div盒子水平垂直居中
<style>
.box{
width: 800px;
height: 600px;
border: 1px solid #CCCCCC;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: center; /*垂直居中*/
-webkit-box-pack: center; /*水平居中*/
}
.box div{
text-align: center;
width: 100px;
margin: 10px;
height: 100px;
line-height: 100px;
color: #FFFFFF;
background: #00A72B;
}
</style>
css3_box8.png
以上就是我要讲的弹性盒模型，谢谢大家的阅读！
