圣杯布局是什么：
圣杯布局是实现一个两侧宽度固定，中间宽度自适应的三栏布局。常见于电商平台
关键点:通过 flex属性 来实现两边定宽，中间自适应。
<style>
.box {
display: flex;
width: 60%;
height: 60px;
background-color: pink;
margin: 10px auto;
}
.box div:first-child,
.box div:last-child {
width: 60px;
height: 60px;
background-color: red;
}
.box div:nth-child(2) {
flex: 1;/* `flex` 属性用于指定弹性子元素如何分配空间 */
background-color: green;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="box">
<div>左边栏</div>
<div>中间栏</div>
<div>右边栏</div>
</div>
</body>
