两列固定,中间自适应,或左边固定,右边自适应,都是属于圣杯布局
具体实现效果如下所示
html 元素
<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
css 代码示例
.wrapper {
display: flex;
}
.left,
.right {
width: 100px;
height: 300px;
background: blue;
}
.middle {
flex: 1;
background: red;
}
上面主要利用的是弹性flex布局,父级元素设置display:flex,两边元素固定宽度,中间自适应使用flex:1,便会实现自动的自适应
示例效果如下所示
具体更多关于圣杯布局可参考https://coder.itclan.cn/fontend/css/css-base-elem-center/