[CSS]flex布局的应用场景----圣杯布局

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

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

1 ·

CC 4.0 BY-SA版权

前端面试题同时被 2 个专栏收录

67 篇文章

订阅专栏

css

28 篇文章

订阅专栏

本文详细介绍了一种名为圣杯布局的网页布局方式，该布局利用弹性盒模型实现左右固定宽度，中间自适应的内容区域布局。文章提供了完整的HTML和CSS代码示例，展示了如何通过设置flex属性实现这种布局。

圣杯布局

一、效果
圣杯布局

二、思路：
一个纵向的弹性盒的中间部分是一个横向的弹性盒，纵向弹性盒中间可伸缩，横向弹性盒两边宽度固定，中间(黄色部分)伸缩
提醒:
1.默认弹性盒是横向的,所以要设置方向-》 flex-direction: column;
2.纵向弹性盒要记得设置高度-》height:100vh;占满屏幕高度

三、代码：

<body>

    <div class="container">
        <header>
            头部
        </header>
        <section class="content">
            <div class="content-left">左左左左左左</div>
            <div class="content-mid">中中中中中中</div>
            <div class="content-right">右右右右右右</div>
        </section>
        <footer>
            底部
        </footer>
    </div>
</body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container {
        display: flex;
        /*弹性布局,使header、section、footer变为弹性盒*/
        flex-direction: column;
        /*纵向排列*/
        height: 100vh;
        /*占满整个屏幕高*/
    }

    .content {
        flex: 1;
        /*相当于flex:1 1 0，意味着自适应缩放将剩余空间平均分，*/
        /*若只有一个元素则独占剩余所有空间*/
        display: flex;
        /*弹性布局,使.content-left、.content-mid、.content-right
        变为弹性盒*/
    }

    .content-left {
        background: blue;
        flex: 0 0 100px;
        /*不放大，不缩小，100px宽*/
    }

    .content-mid {
        background: yellow;
        flex: 1;
    }

    .content-right {
        background: red;
         flex: 0 0 100px;
        /*不放大，不缩小，100px宽*/
    }
</style>