与时俱进,三栏弹性布局的5种方法(绝对定位、圣杯、双飞翼、flex、grid)
一、前言
本文以实用角度出发,直接列出三栏弹性布局的5种方法:绝对定位、圣杯、双飞翼、flex、grid 的具体代码,并简要分析其原理和优缺点。
二、需求
需求:用css实现三栏布局,html结构代码如下,顺序不能变(main优先渲染),可以适当加元素,同时要求left宽度200px,right宽度300px,main宽度自适应。
<div class="container">
<div class="main">main 宽度自适应</div>
<div class="left">left 宽200px</div>
<div class="right">right 宽300px</div>
</div>
效果:
三、具体代码
3.1 绝对定位布局
原始的布局方法
- 原理:container为相对定位并设置左右padding为left和right的宽度,left\right绝对定位在左右两侧,main不用设置。
- 优点:兼容好、原理简单
- 缺点:left和right都为绝对定位,高度不能撑开container
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>绝对定位布局</title>
</head>
<style>
.container{
color:#fff;
position: relative;
padding:0 300px 0 200px;
}
.left,.main,.right{
top:0;
min-height:100px;
}
.left{
position:absolute;
width: 200px;
background: blue;
left:0;
}
.right{
position:absolute;
width:300px;
background: red;
right:0;
}
.main{
background: green;
}
</style>
<body>
<div class="container">
<div class="main">main 宽度自适应</div>
<div class="left">left 宽200px</div>
<div class="right">right 宽300px</div>
</div>
</body>
</html>
3.2 圣杯布局
经典布局方法
- 原理:container设置左右padding为left和right的宽度,left\right\main 浮动,left\right相对定位并设置left、right、margin-left来偏移位置,main宽100%。
- 优点:兼容好
- 缺点:原理复制,left/right/main高度自适应情况下3者不能高度一致。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
</head>
<style>
.container{
color:#fff;
overflow: hidden;
padding:0 300px 0 200px;
}
.left,.main,.right{
float:left;
position: relative;
min-height:100px;
}
.left{
width: 200px;
background: blue;
margin-left:-100%;
left:-200px;
}
.right{
width:300px;
background: red;
margin-left:-300px;
right:-300px;
}
.main{
width:100%;
background: green;
}
</style>
<body>
<div class="container">
<div class="main">main 宽度自适应</div>
<div class="left">left 宽200px</div>
<div class="right">right 宽300px</div>
</div>
</body>
</html>
3.3 双飞翼布局
圣杯布局改进方法
- 原理:left\right\main 浮动,left\right设置margin-left来偏移位置,main宽100%,main出入content,并设置content的左右边距为left\right宽度
- 优点:兼容好,原理简单
- 缺点:left/right/main高度自适应情况下3者不能高度一致。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
</head>
<style>
.container{
color:#fff;
overflow: hidden;
}
.left,.main,.right{
float:left;
min-height:100px;
}
.left{
width: 200px;
background: blue;
margin-left:-100%;
}
.right{
width:300px;
background: red;
margin-left:-300px;
}
.main{
width:100%;
background: green;
}
.content{
margin:0 300px 0 200px;
}
</style>
<body>
<div class="container">
<div class="main">
<div class="content">
main 宽度自适应
</div>
</div>
<div class="left">left 宽200px</div>
<div class="right">right 宽300px</div>
</div>
</body>
</html>
3.4 flex布局
css3新布局方式
- 原理:container设置display:flex ,left设置order:-1排在最前面,main设置flex-grow:1 自适应宽度
- 优点:原理简单,代码简洁,left/right/main高度自适应情况下3者能高度一致
- 缺点:兼容性不够好,ie10+,chrome20+,正式使用要加各种前缀(-webkit--ms-)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>flex布局</title>
</head>
<style>
.container{
color:#fff;
display: flex;
}
.left,.main,.right{
min-height:100px;
}
.left{
order:-1;
width: 200px;
background: blue;
}
.right{
width:300px;
background: red;
}
.main{
flex-grow:1;
background: green;
}
</style>
<body>
<div class="container">
<div class="main">main 宽度自适应</div>
<div class="left">left 宽200px</div>
<div class="right">right 宽300px</div>
</div>
</body>
</html>
3.5 grid布局
css3新布局方式
- 原理:container设置display:grid 和 grid-template-columns:200px auto 300px,left设置order:-1排在最前面
- 优点:原理简单,代码简洁,left/right/main高度自适应情况下3者能高度一致
- 缺点:兼容性较差,ie10+,Chrome57+,正式使用要加各种前缀(-webkit--ms-)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>grid布局</title>
</head>
<style>
.container{
color:#fff;
display: grid;
grid-template-columns: 200px auto 300px;
}
.left,.main,.right{
min-height:100px;
}
.left{
order:-1;
background: blue;
}
.right{
background: red;
}
.main{
background: green;
}
</style>
<body>
<div class="container">
<div class="main">main 宽度自适应</div>
<div class="left">left 宽200px</div>
<div class="right">right 宽300px</div>
</div>
</body>
</html>
四、总结
发现一个特点,order属性可以用在flex和grid上。
总的来说flex和grid布局原理更简单,功能也更多,是未来趋势,目前可以考虑用在移动端。
参考:https://blog.csdn.net/wangchengiii/article/details/77926868