CSS 圣杯布局
- flex 布局（推荐）
- 定位布局（推荐）
- css3 calc布局（影响性能，不推荐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1. flex 布局（推荐） */
.container{
/* display: flex;
height: 500px; */
/* 可实现上中下布局 */
/* flex-direction: column; */
}
.left,.right{
/* height: 200px;
flex: 0 0 200px;
background: #888; */
}
.center{
/* flex: 1;
height: 300px;
background: pink; */
}
/* 2. 定位布局（推荐） */
.container{
/* position: relative; */
}
.left,.right{
/* width: 200px;
height: 200px;
position: absolute;
top: 0;
background: #888; */
}
.left{
/* left: 0; */
}
.right{
/* right: 0; */
}
.center{
/* height: 300px;
background: pink;
margin: 0 200px; */
}
/* 3. css3 calc布局（影响性能，不推荐） */
.left,.right{
width: 200px;
height: 200px;
background: #888;
}
.left{
float: left;
}
.right{
float: right;
}
.center{
width: calc(100% - 400px);
height: 300px;
background: pink;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
flex: 1
- 利用
flex: 1 可实现不同内容的 div 平分空间
- flex 属性是
flex-grow、flex-shrink、flex-basis 的简写，默认 flex: 0 1 auto
flex-grow 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大
flex-shrink 定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小
flex-basis 给上面的两个属性分配多余空间之前，计算项目是否有多余空间，默认 auto，即项目本身的大小
-
flex: 1 的完整写法
flex-grow:1;
flex-shrink:1;
flex-basis:0%;
flex-grow:0;
flex-shrink:0;
flex-basis:auto;
flex-grow:1;
flex-shrink:1;
flex-basis:auto;
网友评论