Open goldEli opened 4 years ago
1、grid实现圣杯布局:
<div class="container">
<div class="middle">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
.container{
display: grid;
height: 100px;
}
.middle{
background-color: rgb(178, 236, 178);
grid-row: 1;
grid-column: 2/4;
}
.left{
background-color: rgb(248, 144, 144);
grid-row: 1;
grid-column: 1/2;
}
.right{
background-color: rgb(151, 151, 252);
grid-row: 1;
grid-column: 4/5;
}
2、flex实现水平垂直居中
<div class="container">
<div class="content"></div>
</div>
.container{
display: flex;
height: 600px;
width: 600px;
border: 1px solid #000;
justify-content: center;
align-items: center;
}
.content{
width: 300px;
height: 300px;
background-color: #f73f3f;
}
学习 flex,grid
实现以下代码: