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

最新推荐文章于 2024-05-21 19:43:55 发布

DaftJayee

最新推荐文章于 2024-05-21 19:43:55 发布

阅读量285

点赞数

分类专栏：前端面试题 css

本文链接：https://blog.csdn.net/qq_43540219/article/details/107940634

版权

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

67 篇文章 3 订阅

订阅专栏

css

28 篇文章 0 订阅

订阅专栏

圣杯布局

一、效果
圣杯布局

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

DaftJayee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[CSS]flex布局的应用场景----圣杯布局

左边固定右边两个自适应缩放一、效果二、代码<body> <div class="container"> <div class="left">左左左左左左</div> <div class="mid">中中中中中中</div> <div class="right">右右右右右右</div> </div></body>
复制链接

扫一扫

专栏目录