伸缩比,圣杯布局

最新推荐文章于 2024-08-16 14:28:01 发布

衔钰

最新推荐文章于 2024-08-16 14:28:01 发布

阅读量91

点赞数

分类专栏： css基础知识文章标签： html css 前端 css3 青少年编程

本文链接：https://blog.csdn.net/luzixi/article/details/125963292

版权

css基础知识专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文详细介绍了Flex布局中的伸缩比概念，通过实例展示了如何使用flex:1分配父元素剩余空间，并创建了四个子元素，其中第二和第四个占据两倍空间。此外，还探讨了圣杯布局的含义，即两侧固定宽度，中间部分自适应的布局方式，提供了一个实际的搜索栏布局案例。

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

伸缩比:占的是父盒子的宽度,把他分成了等份

flex:1; 一定给子盒子加

分配父级剩余的空间

写个案例:写四个小盒子,第二个和第四个占其他的两倍

示意图:

代码:

  * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            height: 400px;
            background-color: pink;
            margin: 100px auto;
            /* 弹性容器 */
            display: flex;
        }

        /* 弹性盒子 */
        .box>div {
            /* 伸缩比,占的是父盒子的宽度,把他分成了等份 */
            flex: 1;
            margin-right: 15px;
            background-color: aqua;
        }

        .box>div:nth-child(2n) {
            flex: 2;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

圣杯布局:

意思:2边固定宽高,中间自适应

注意:很常用,尤其是导航栏

思路:

两侧盒子写固定大小
中间盒子 flex: 1; 占满剩余空间

案例示意图:

代码:

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .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;
        }
    </style>
</head>

<body>
    <!-- 圣杯布局,2边固定宽高,中间自适应 -->

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

</html>