flex 圣杯布局

客官°小女子只卖身不卖艺 2021-12-18 15:09 551阅读 0赞

![604357-20190302201827173-536339308.png][]

**基本思路**

圣杯布局分为3段：上、中、下。  中段被分为：左、中、右3块。

1：采用flex布局时，先把弹性容器主轴设置为垂直方向（flex-direction:column）

2：上、中、下3块弹性项目设置均匀拉伸（flex:1）或固定上、下两端大小，让中间自动拉伸。注意：flex:拉伸是方向为主轴方向

3：中段部分在设置为弹性容器，主轴方向为水平方向（flex-direction:row），此时左、中、右3块为弹性项目。中间块设置为自动拉伸，左、右两块可设置固定宽度。

**代码**

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

.container{
        
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    .header,
    .footer{
        
        height: 75px;
        background: greenyellow;
    }
    .content{
        
        display: flex;
        flex-direction: row;
        flex: 1;
    }
    .left,.right{
        
        width:200px;
        background: darkorange;
    }
    .center{
        
        flex: 1;
    }

转载于:https://www.cnblogs.com/whnba/p/10462787.html

[604357-20190302201827173-536339308.png]: /images/20211218/0aea8849885041cd83b59a41bd4493fa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，551人围观）

还没有评论，来说两句吧...

相关阅读

相关圣杯布局

<style> * { padding: 0; margin: 0; ...

逃离我推掉我的手/ 2024年04月19日 11:33/ 0 赞/ 197 阅读

相关 Flex Box页面布局实战课程-圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水

港控/mmm°/ 2024年02月19日 17:48/ 0 赞/ 173 阅读

相关 Flex Box页面布局实战课程-圣杯布局

效果图微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][http

墨蓝/ 2024年02月19日 16:31/ 0 赞/ 111 阅读

相关 css布局双飞翼布局圣杯布局flex，float

css布局双飞翼布局圣杯布局flex，float 目录双飞翼布局（三列布局，高度铺满，两边定宽，中间自适应）三栏等高布局 (高度不

喜欢ヅ旅行/ 2023年02月22日 08:09/ 0 赞/ 38 阅读

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

圣杯布局一、效果 ![圣杯布局][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

冷不防/ 2022年11月26日 09:41/ 0 赞/ 387 阅读

相关详解圣杯布局

圣杯布局 html结构： <!doctype html> <html lang="en"> <head> <meta cha

以你之姓@/ 2022年04月25日 00:14/ 0 赞/ 517 阅读

相关圣杯布局

.left{100px}.right{100px}.center{ calc(100% - 200px) } 圣杯布局复制代码转载于:h

布满荆棘的人生/ 2022年01月19日 03:05/ 0 赞/ 398 阅读

相关经典布局（flex和传统两种实现）—圣杯布局

所谓圣杯布局（三栏加页眉页脚）一张图解释就是 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

╰+哭是因爲堅強的太久メ/ 2022年01月11日 11:53/ 0 赞/ 361 阅读

相关 flex 圣杯布局

![604357-20190302201827173-536339308.png][] 基本思路圣杯布局分为3段：上、中、下。中段被分为：左、中、右3块。 1

客官°小女子只卖身不卖艺/ 2021年12月18日 15:09/ 0 赞/ 552 阅读

相关圣杯布局

圣杯布局要实现两边固定，中间自适应，中间部分的代码要放在最上面实现优先加载步骤第一步：创建middle，left，right，及包裹它们的父盒子cont

不念不忘少年蓝@/ 2021年08月29日 02:34/ 0 赞/ 562 阅读