css3盒子布局-定义盒子的弹性空间(box-flex)

来源：互联网发布：2016年4月进出口数据编辑：程序博客网时间：2024/05/21 17:04

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3定位布局-盒子的弹性空间(box-flex)</title>
<style>
body{
margin:0;
padding:0;
text-align: center;
/*background-color: #d9bfe8;*/
}
.box{
margin:auto;
text-align:center;
width:988px;
height:50px;
overflow:hidden;
display: box;
display: -moz-box;
display:-webkit-box;
-moz-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient:horizontal;
}
.box1{
background-color: #005AA7;
width:180px;
width:500px;
}
.box2{
border:1px solid #ccc;
margin:2px;
-moz-box-flex: 2;
-webkit-box-flex: 2;
box-flex:2;
height:500px;
background-color: #00EE00;
}
.box3{
border:1px solid #ccc;
margin:2px;
-moz-box-flex: 5;
-webkit-box-flex: 5;
box-flex:5;
height:500px;
background-color: #00F5FF;
}
</style>
</head>
<body>
<h1>box-flex:<number>,参数值是一个整数或者小数,控制子元素在盒子中的显示空间,根据他们所占的比例来分配盒子的剩余空间</h1>
<div class="box">
<div class="box1">左侧布局</div>
<div class="box2">中间布局</div>
<div class="box3">右侧布局</div>
</div>
</body>
</html>

0 0