flex布局之圣杯布局

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

谈笑~风声

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

阅读量236

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42676363/article/details/90179919

直接上代码

    <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;
        }