【圣杯布局】移动端顶部搜索部分常用布局

Lauv-

于 2022-10-07 20:25:21 发布

阅读量97

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_74086230/article/details/127198603

版权

所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。

一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如小米商城手机版主页面顶部搜索

核心思路：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 50px;
            /* 弹性容器 */
            display: flex;
        }
        /* 弹性盒子 */
        .box div:first-child{
            width:50px ;
            height: 50px;
            background-color: pink;
        }
        .box div:nth-child(2){
            background-color: aqua;
            height: 50px;
            /* 伸缩比 */
            flex: 1;
        }
        .box div:last-child{
            width:50px ;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

注意：中间flex: 1和 width 有冲突时优先执行 flex：1；