超级居中
place-item:center 实现垂直居中
父级元素设置一下属性即可
display: grid;
place-items: center;
解构煎饼式布局:flex:
baseWidth 是设置盒子基本宽度 如果没有设置 则取默认的宽度
grow 是当父级盒子有剩余空间时候 剩余空间给子级填充剩余空间的比例
shrink 是当父级元素宽度不够时候 那么子级元素进行压缩适配父级的比例
案例如下:
<!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>
.container {
height: 50px;
display: flex;
background-color: #eee;
}
.item {
height: 50px;
}
.item:nth-child(1) {
width: 50px;
background: red;
}
.item:nth-child(2) {
width: 70px;
flex-grow: 1;
flex-basis: auto;
background: grey;
}
.item:nth-child(3) {
width: 50px;
flex-grow: 2;
flex-basis: 100px;
background: yellow;
}
.container1 {
display: flex;
flex-wrap: wrap;
justify-content: center;
height: 100px;
border: 1px solid red;
margin-top: 200px;
}
.child {
flex: 1 0 150px;
margin: 5px;
height: 100px;
border: 1px solid yellow;
}
</style>
</head>
<body>
<!-- 第一个案例是一个元素固定 其余元素适配 从pc适配到手机端 -->
<div class="container">
<div class="item">123</div>
<div class="item">456</div>
<div class="item">789</div>
</div>
<!-- 自适应布局 -->
<div class="container1">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
</html>
侧边栏布局:grid-template-columns: minmax(, ) …)
此布局利用了minmax函数 这里是将盒子的最小值设置为150px 当宽度大于150px时候 会自动适应父级的25% 如果小于等于150px 就显示为150px
第二个参数是1fr 是css的新的单位 自动适配剩余空间
<!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>
.container {
display: grid;
height: 200px;
border: 1px solid red;
grid-template-columns: minmax(300px, 25%) 1fr;
}
.children {
height: 200px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class="container">
<div class="children">左边列</div>
<div class="children">右边列</div>
</div>
</body>
</html>
煎饼堆栈布局:grid-template-rows: auto 1fr auto
就是头部和底部固定在头部和底部 中间部分的内容自适应
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
<!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>
.container {
display: grid;
grid-template-rows: 200px 1fr auto;
height: 90vh;
}
.border{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="border">Header</div>
<div class="border">Main</div>
<div class="border">Footer</div>
</div>
</body>
</html>
经典圣杯布局:grid-template: auto 1fr auto / auto 1fr auto
头部和底部固定 中间部分 两边固定 中间部分自适应
关键样式
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
案例
<!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>
.container {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
height: 99vh;
}
.border {
border: 1px solid red;
}
/* grid-column 表示从哪一列开始 哪一列结束 */
.header{
padding: 10px;
grid-column: 1 / 4;
}
.left{
grid-column: 1/2;
}
</style>
</head>
<body>
<div class="container">
<div class="border header">Header</div>
<div class="border left">Left Sidebar</div>
<div class="border main">Main Content</div>
<div class="border right">Right Sidebar</div>
<div class="border footer">Footer</div>
</div>
</body>
</html>
12 跨网格:grid-template-columns: repeat(12, 1fr)
<!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>
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
height: 90vh;
}
.border {
border: 1px solid red;
}
/* grid-column 表示从哪一列开始 哪一列结束 */
/* grid-column: 1/13; 1/13 相当于1/span 12 2/8 等价于2/ span 6*/
.span12 {
padding: 10px;
grid-column: 1/13;
}
.span6 {
grid-column: 2/8;
}
.span4 {
grid-column: 1/5;
}
.span2 {
grid-column: 3/8;
}
</style>
</head>
<body>
<div class="container">
<div class="border span12">Span12</div>
<div class="border span6">Span 6</div>
<div class="border span4">Span 4</div>
<div class="border span2">Span 2</div>
</div>
</body>
</html>
aspect-ratio
宽高等比缩放
<!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>
.div{
aspect-ratio:16/9;
border:1px solid red;
padding:100px;
}
</style>
</head>
<body>
<div class="div">
ssss
</div>
</body>
</html>
clamp
具有兼容性问题 好用但慎用
{
font-size: clamp(20px, 18px, 40px);
width: clamp(100px, 100%, 200px);
}
当首选值比最小值要小时,则使用最小值。
当首选值介于最小值和最大值之间时,用首选值
当首选值比最大值要大时,则使用最大值。
排列布局:justify-content: space-between
作用和flex布局中的justify-content 一样
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(, 1fr))
RAM 是 Repeat Auto MinMax 的缩小
auto-fit 表示会自动适配剩下的空间
上述例子表示 如果屏幕宽度达到最小值 则以150px进行展示 如果大于150px将自动适配多余的空间
auto-fill 不会适配剩余空间
<!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>
.container {
display: grid;
/* 当元素宽度小于300px时候 以最小单位300px来展示 当大于300px时候 将自适应屏幕
如果改为auto-fill 当大于300px的时候 不会自适应填充剩下的空间 */
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
height: 90vh;
}
.border {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="border">1</div>
<div class="border">2</div>
<div class="border">3</div>
<div class="border">4</div>
</div>
</body>
</html>