flex实现响应式栅格布局（样式）

最新推荐文章于 2025-06-29 19:24:34 发布

石开！

最新推荐文章于 2025-06-29 19:24:34 发布

阅读量808

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/weixin_44923275/article/details/119606288

web 专栏收录该内容

10 篇文章

订阅专栏

该博客介绍了如何利用CSS的媒体查询@media和Flexbox布局技术，根据屏幕尺寸动态调整页面中按钮的排列方式，实现从单列到多列的响应式设计。在不同屏幕宽度下，按钮的宽度会变化以适应屏幕，从而达到良好的移动端适配效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结果展示：

在这里插入图片描述

实现思路：

· 媒体查询 来实现适配不同尺寸屏幕
· flex 来实现多行多列

代码如下：

        .father {
            display: flex;
            flex-wrap: wrap;
            width: 70%;
            margin: auto;
            background-color: blueviolet;
        }

        @media screen and (min-width: 100px) {
            .father button {
                width: 100%;
                height: 100px;
            }
        }

        @media screen and (min-width: 300px) {
            .father button {
                width: 33.33%;
                height: 100px;
            }
        }

        @media screen and (min-width: 414px) {
            .father button {
                width: 25%;
                height: 100px;
            }
        }

        @media screen and (min-width: 750px) {
            .father button {
                width: 20%;
                height: 100px;
            }
        }

        @media screen and (min-width: 1024px) {
            .father button {
                width: calc(100%/6);
                height: 100px;
            }
        }

    <div class="father">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>7</button>
    </div>