CSS3圣杯布局
圣杯布局:左右两列宽度固定,中间列自适应。圣杯布局,是学习css3后,常见的布局之一。
窗口最大化示例:
窗口缩小后,两边宽度不变,中间缩小:
源码
先设置一个头部,中间,底部。中间又分为左中右三部分。
<div class='container'>
<header>头部</header>
<section>
<div class='left'>左</div>
<div class='center'>中</div>
<div class='right'>右</div>
</section>
<footer>底部</footer>
</div>
添加css样式
* {
margin: 0;
padding: 0; //清除浏览器的内外边距
}
.container {
display: flex;
height: 100vh;
flex-direction: column; //设置 <div> 元素内弹性盒元素的方向
}
header {
background: #888888; //头部加一个背景颜色
}
section {
flex: 1; //让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容:
background: pink;
display: flex;
}
footer {
background: #ccc;
}
.left {
background: orangered;
flex: 0 0 100px; //flex-grow: 0; flex-shrink: 0; flex-basis: 100px;
}
.center {
flex: 1; //flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
background: skyblue;
}
.right {
flex: 0 0 100px; //flex-grow: 0; flex-shrink: 0; flex-basis: 100px;
background: orange;
}
以上就是圣杯布局的基本样式了
最后合并代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
flex-direction: column;
}
header {
background: #888888;
}
section {
flex: 1;
background: pink;
display: flex;
}
footer {
background: #ccc;
}
.left {
background: orangered;
flex: 0 0 100px;
}
.center {
flex: 1;
background: skyblue;
}
.right {
flex: 0 0 100px;
background: orange;
}
</style>
</head>
<body>
<div class='container'>
<header>头部</header>
<section>
<div class='left'>左</div>
<div class='center'>中</div>
<div class='right'>右</div>
</section>
<footer>底部</footer>
</div>
</body>
</html>