flex常用布局之圣杯布局

最新推荐文章于 2023-10-08 16:29:47 发布

Z181L

最新推荐文章于 2023-10-08 16:29:47 发布

阅读量111

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/Z181L/article/details/125920347

版权

本文介绍了如何利用CSS Flexbox布局创建一个三栏结构，其中左右两栏宽度固定，中间栏宽度自适应。通过设置父元素为flex容器，并为左右两个子元素设定固定尺寸，中间元素设置`flex: 1`，实现了在不同屏幕尺寸下中间内容区域的自动调整。此布局常用于移动端页面顶部导航，确保内容在不同设备上展示良好。

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

简单来讲就是2边固定宽高,中间自适应

<div class="search">
        <div class="left">左边</div>
        <div class="center">中间的内容</div>
        <div class="right">右边</div>
    </div>

设置好DIV后给父元素 .search添加属性display:flex;

.left盒子和.right盒子设置固定宽高

.center设置属性 flex: 1;(伸缩比,占父元素盒子剩余的全部宽度)

经常用在移动端页面顶部导航,实际效果:

中间的内容宽度会根据浏览器宽度自适应

样式代码

 .search {
            width: 100%;
            height: 50px;
            background-color: pink;
            /* 弹性容器 */
            display: flex;
        }

        .search .left {
            width: 50px;
            height: 50px;
            background-color: aqua;
        }

        .search .center {
            flex: 1;
            background-color: red;
        }

        .search .right {
            width: 50px;
            height: 50px;
            background-color: aqua;
        }