项目当中实用的圣杯布局（flex）

最新推荐文章于 2024-09-09 17:19:02 发布

柒刖

最新推荐文章于 2024-09-09 17:19:02 发布

阅读量295

点赞数 5

文章标签： html 前端

本文链接：https://blog.csdn.net/lzz20010903/article/details/138208810

版权

本文分享了如何使用flex弹性布局实现圣杯布局的简单技巧，通过实例代码展示了三栏布局在不同屏幕尺寸下的自适应效果，适合前端开发者学习。

摘要由CSDN通过智能技术生成

大家好！今天的给大家分享一个简单实用的圣杯布局，我呢，采用的是flex 弹性布局来实现的，我觉得这是我发现代码量最小的一个圣杯布局方式，所以我来给大家分享一下。

圣杯布局：就是在我们前端开发当中的很常见的一种布局方式，就是三栏布局，在变动浏览器窗口大小的时候呢，是不会改变边的宽度，中间的自适应，也就是跟着窗口大小进行伸缩。

长话短说，进入正题！biu~~~~

老规矩，先上效果图

上代码！！！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局flex</title>
    <style>
        .header{
            background-color: #ccc;
            height: 50px;
        }
        .main{
            display: flex;
            height: calc(100vh - 100px);
            background-color: blueviolet;
        }
        .main .left{
            width: 200px;
            background-color: chartreuse;
        }
        .main .center{
            flex: 1;
        }
        .main .right{
            width: 200px;
            background-color: darkcyan;
        }
        
        .footer{
            background-color: #ccc;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">header</div>
        <div class="main">
            <div class="left">left</div>
            <div class="center">center</div>

            <div class="right">right</div>
        </div>
        <div class="footer">footer</div>
    </div>
</body>

</html>

兄弟们，有不懂的地方随时可以问我啊！！大家一起努力进步！！！