您的位置：首页 > Web前端 > CSS

CSS3弹性盒模型

2015-09-06 22:51 751 查看

旧式的弹性盒子方法

1、在拥有盒子的盒子上加display:box; 或 inline-box 开启弹性盒模型

2、box-flex 分配空间，假如容器有a份，box-flex:2，那就占a分之2

3、分布方向水平box-orient: horizontal; 垂直 box-orient:vertical;

4、定义显示顺序：box-ordinal-group

实例(没作兼容)

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>旧弹性盒模型</title>
<style type="text/css">
.content{
width: 1000px;
display:-webkit-box;
}
.content div {
height: 50px;
line-height: 50px;
text-align: center;
}

#box1 {
background: #F69A0B;
-webkit-box-flex:1;
-webkit-box-ordinal-group:2;
}

#box2 {
background: #FE6403;
-webkit-box-flex:2;
-webkit-box-ordinal-group:1;
}

#box3 {
background: #02C3F5;
-webkit-box-flex:3;
-webkit-box-ordinal-group:3;
}
</style>
</head>

<body>
<div class="content">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>
</body>

</html>

新式的弹性盒子方法

1、在拥有盒子的盒子上加display:flex; 开启弹性盒模型

2、flex-grow 分配空间，假如容器有a份，box-flex:2，那就占a分之2

3、分布方向水平flex-direction: row; 垂直 flex-direction:column;

4、定义显示顺序：order

实例(没作兼容)-与上面效果相同，只是写法不一样

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>新弹性盒模型</title>
<style type="text/css">
.content {
width: 1000px;
height: 500px;
display: -webkit-flex;
}

.content div {
height: 50px;
line-height: 50px;
text-align: center;
}

#box1 {
background: #F69A0B;
-webkit-flex: 1;
-webkit-flex-grow: 1;
-webkit-order: 2;
}

#box2 {
background: #FE6403;
-webkit-flex: 2;
-webkit-flex-grow: 2;
-webkit-order: 1;
}

#box3 {
background: #02C3F5;
-webkit-flex: 3;
-webkit-flex-grow: 3;
-webkit-order: 3;
}
</style>
</head>

<body>
<div class="content">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>
</body>

</html>

注意

display:box; 是在属性值加兼容如 display:-webkit-box;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航