Flex实现网格布局，保姆教程

Flex实现网格布局

随便水个文章
使用 flex 实现网格布局
使用 flex 结合媒体查询实现 grid的 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));响应式布局功能

1、兼容性对比

懒得慢慢看兼容性，直接问的ai的，感兴趣的可以去 caniuse.com/ 网站查看。不管是ai回答的和网站查询的结果，都能很容易的看出 flex 兼容性比 grid 好很多。

不知道大伙喜欢用啥布局，不管是前端还是flutter我都更喜欢用 grid 布局，grid的对齐更舒服一点，咱就简简单单用几行代码通过flex实现网格布局。

2、flex实现网格布局

如下图所示，使用 grid 实现的话非常简单，不做过多介绍了，站内也有非常多关于 grid 布局的教程，不会的可以去看一下。
使用 flex 实现的话重点需要计算出子元素的宽度，并且要保证最后一行的对齐也没问题，即最后一行的元素不足三个时，也要保证元素从左到右依次对齐。

完整代码如下

子元素宽度 = (父元素宽度 - 总间隔宽度)/每行显示个数
总间隔宽度 = (每行显示个数 - 1)*间隔宽度
父元素需开启换行 flex-wrap: wrap;
子元素的 aspect-ratio: 2;属性表示元素宽和高的比例，设置该属性后，元素将始终保持宽高比，屏幕变化时不再被拉伸或压缩，而是进行等比缩放。

我们把 每行显示的个数 和 每个元素之间的间距 提取为自定义属性 --n 和 --g ，方便后期计算，通过上方公式即可得出子元素的 width = calc((100% - calc(var(--g) * 1px)*calc(var(--n) - 1)) / var(--n))。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .flex {
            /* 每行显示的个数 */
            --n: 6;
            /* 每个元素之间的间距 */
            --g: 10;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            gap: calc(var(--g) * 1px);
        }

        .flex div {
            /* 计算每一项的宽度 */
            width: calc((100% - calc(var(--g) * 1px)*calc(var(--n) - 1)) / var(--n));
            aspect-ratio: 2;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="flex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>

</html>

最终效果如下，上方代码copy到html文件中，浏览器打开即可预览效果。

3、实现响应式布局

布局都出来了，响应式不要太容易，上方已经把 每行显示的个数 提取为 --n 了，我们只需要通过媒体查询改变 --n 的值即可实现类似 grid的 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));响应式布局功能。完整代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .flex {
            /* 每行显示的个数 */
            --n: 6;
            /* 每个元素之间的间距 */
            --g: 10;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            gap: calc(var(--g) * 1px);
        }

        .flex div {
            /* 计算每一项的宽度 */
            width: calc((100% - calc(var(--g) * 1px)*calc(var(--n) - 1)) / var(--n));
            aspect-ratio: 2;
            background-color: pink;
        }
     
        @media (max-width: 1024px) {
            .flex {
                --n: 4;
            }
        }

        @media (max-width: 768px) {
            .flex {
                --n: 3;
            }
        }
    </style>
</head>

<body>
    <div class="flex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>

</html>

效果预览，同上代码copy到html文件中，浏览器打开即可预览效果。