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

冷不防 2022-11-26 09:41 256阅读 0赞

## 圣杯布局 ##

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

二、思路：  
一个纵向的弹性盒的中间部分是一个横向的弹性盒，纵向弹性盒中间可伸缩，横向弹性盒两边宽度固定，中间(黄色部分)伸缩  
提醒:  
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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70]: /images/20221124/38f3b6311ffd48eb9d1cb6be9e2dfb16.png