flex 圣杯布局

客官°小女子只卖身不卖艺 2021-12-18 15:09 425阅读 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 条评论，425人围观）

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

相关阅读

相关圣杯布局

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

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

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

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

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

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

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

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

相关 CSS经典布局~圣杯布局

为了实现中间自适应，两边固定的最好解决方法, 话不多说，直接撸代码吧。 HTML部分： <div class="wrap"> <div id="hea

男娘i/ 2022年05月19日 02:38/ 0 赞/ 278 阅读

相关 CSS 圣杯布局

圣杯布局，不要被名字所迷惑只是一种简单的布局方式，也不知道从何时起，这种布局方式有了这么响亮的外号。 CSS+DIV 最常见的分栏布局就是浮动布局啦，以Bootstrap框架

川长思鸟来/ 2022年05月12日 13:58/ 0 赞/ 224 阅读

相关详解圣杯布局

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

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

相关圣杯布局

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

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

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

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

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

相关 flex 圣杯布局

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

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

相关圣杯布局

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

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