css弹性盒圣杯布局

最新推荐文章于 2023-08-23 19:18:37 发布

weixin_47304385

最新推荐文章于 2023-08-23 19:18:37 发布

阅读量78

点赞数

分类专栏： css页面布局文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_47304385/article/details/125133457

版权

css页面布局专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.给父级盒子设置flex布局然后使用弹性盒属性使其从上至下显示是
给内容区域flex：1；自适应，左右两侧设置固定宽度。

参考样式

 <style>
        html,body{
            height: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        header{
            height: 100px;
            background: pink;
        }
        main{
            flex: 1;
            background: skyblue;
            display: flex;
        }
        aside{
            width: 100px;
            height: 100%;
            background: red;
        }
        section{
            flex: 1
        }
        article{
            width: 100px;
            height: 100%;
            background: green;
        }
        footer{
            height: 100px;
            background: orange
        }
    </style>
</head>
<body>
    <header></header>
    <main>
        <aside></aside>
        <section></section>
        <article></article>
    </main>
    <footer></footer>
</body>```