高频面试题6：实现1个圣杯布局

一、实现1个圣杯布局

1. HTML

<div class="bottom" >header</div> 
 <div class="main"> 
    <div class="left">left</div> 
    <div class="center">center</div> 
    <div class="right">right</div>
 </div> 
<div class="bottom">bottom</div> 

2. CSS

    .bottom {
        background: #eee;
        text-align: center;
        line-height: 100px;
    }

    .main {
        display: flex;
    }

    .left,
    .center,
    .right {
        text-align: center;
        line-height: 500px;
    }

    .left,
    .right {
        width: 200px;
        background: #ddd;
    }

    .center {
        flex: 1;
        background: white;
    }

Tips：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。
---------- 创作不易，感谢大家，请多多支持！