请教一下老师栅格系统的问题

首页课程实战体系课手记专栏慕课教程

请教一下老师栅格系统的问题

来源：3-2 作业题

兰香川川

2020-03-11 09:52:41

之前老师讲了flex布局来实现栅格系统，但是这个栅格系统每个项目的间隙是怎么设置的呢，这个原理我不太明白。

写回答

1回答

好帮手慕粉

2020-03-11

已采纳

同学你好，间隙是设置了flex布局以后，自动分配的。

参考以下代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .picbox {
            justify-content: space-between;
            display: flex;
            flex-wrap: wrap;
        }

        .img {
            width: 30%;
            margin-bottom: 20px;
        }

        .img img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="picbox">
            <div class="img"><img src="img/1.jpg" alt="1"></div>
            <div class="img"><img src="img/2.jpg" alt="2"></div>
            <div class="img"><img src="img/3.jpg" alt="3"></div>
            <div class="img"><img src="img/4.jpg" alt="4"></div>
            <div class="img"><img src="img/5.jpg" alt="5"></div>
            <div class="img"><img src="img/6.jpg" alt="6"></div>
        </div>
    </div>

</body>

</html>

给父盒子设置了justify-content: space-between，又给每个子元素设置了宽度为30%，那么留下的间隙会自动分配：

如果同学还有别的问题，建议同学新建一个问答金子那个提问，这样老师能更快的看到同学的问题，也便于同学后期的整体。

祝学习愉快~

0 学习 · 6815 问题

查看课程

相似问题

请问老师。

回答 1

你好，老师，请教一个接口的问题

回答 2

老师请问一下

回答 1

关于第五区域高度自适应的问题

回答 2

请老师答疑

回答 4

打开慕课网App查看更多内容