flex布局之圣杯布局

最新推荐文章于 2025-06-03 09:03:18 发布

原创最新推荐文章于 2025-06-03 09:03:18 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

直接上代码

    <div class="wrapper">
        <div class="header"></div>
        <div class="container">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>

        .wrapper{
            width:100%;
            height:100%;
            display:flex;
            flex-direction:column;
        }
        .container{
            flex:1 1 auto;
            display:flex;
        }
        .header,.footer,.left,.right{
            flex:0 0 20%;
            background:#f0f;
        }
        .left,.right{
            background:#ccc;
        }
        .center{
            flex:1 1 auto;
        }