子元素自动填充父容器，并且会自动折行- dispaly: grid

最新推荐文章于 2023-11-06 16:55:55 发布

ら不吃つ

最新推荐文章于 2023-11-06 16:55:55 发布

阅读量1.9k

点赞数 3

分类专栏： css 文章标签： display: flex display: grid 自适应布局折行 css

本文链接：https://blog.csdn.net/qq_33495944/article/details/103406720

版权

css 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

很多时候，我们都需要这样的布局

父元素宽度是resizable
子元素个数不确定
子元素无论都少宽度都可以自动填充父元素当子元素过多时，
子元素可以自动折行
每行的子元素宽度一置，都是左对齐
如图：

如果实现以上的1-4的需求，我们完全可以用dispaly:flex;来实现，如：

<style>
    .parent {
        width: 40%;
        border: 3px solid #567856;
        display: flex;
        flex-wrap: wrap;
    }

    .parent>div {
        flex: 1;
        border: 2px solid #567fff;
        min-width: 140px;
        height: 200px;
        margin: 10px;
    }
</style>

<body>
    <div class="parent">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

效果图如下：
在这里插入图片描述
我们发现这确实满足了我们需求的1，2，3，4 但是，你会发现第一行与第二行元素不是对齐的，这样就不满足我们的需求5了，所以我们换一种布局方式，就是dispaly: grid

<style>
    .parent {
        width: 40%;
        border: 3px solid #567856;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
        padding: 10px;
    }

    .parent>div {
        border: 3px solid #567fff;
        height: 150px;
    }
</style>

<body>
    <div class="parent">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

效果图：
在这里插入图片描述

这样就实现了。

下面我们来区分一下auto-fit 与auto-fill 实现效果的区别吧。
在上面的例子中auto-fit 与auto-fill 效果是一样的，让我们删掉一些div，只留3个子元素试试吧。

<style>
    .parent {
        width: 40%;
        border: 3px solid #567856;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); // repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
        padding: 10px;
    }
    .parent>div {
        border: 3px solid #567fff;
        height: 150px;
    }
</style>
<body>
    <div class="parent">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

其中grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 效果如图
在这里插入图片描述
而grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 效果如图

这下我们明显看到区别了吧。

注：auto-fit和auto-fill只有在容器宽度大于子元素的最小宽度总和时才有显示区别。

auto-fill 最后一步是会保留空轨道留白，不会折叠空轨道，而auto-fit则把空白轨道的空间全部平均分配给了有元素的轨道，所以auto-fit的最后一步是，折叠空轨道，将空轨道的空间全部平均分配给已有元素的轨道，不留空白。

ら不吃つ

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
子元素自动填充父容器，并且会自动折行- dispaly: grid

很多时候，我们都需要这样的布局父元素宽度是resizable子元素个数不确定子元素无论都少宽度都可以自动填充父元素当子元素过多时，子元素可以自动折行每行的子元素宽度一置，都是左对齐如图：如果实现以上的1-4的需求，我们完全可以用dispaly:flex;来实现，如：<style> .parent { width: 40%; ...
复制链接

扫一扫