效果图
代码
html
复制代码
<body>
<section class="content">
<div class="item">元素</div>
<div class="item">元素</div>
<div class="item">元素</div>
<div class="item">元素</div>
<div class="item">元素</div>
<div class="item">元素</div>
<div class="item">元素</div>
</section>
</body>
<style>
.content {
width: 100%;
display: flex;
flex-wrap: wrap;
background-color: skyblue;
}
.item {
flex: 0 0 calc((100% - 10px)/3);
height: 120px;
background-color: pink;
/* 间隙为5px */
margin: 0 5px 5px 0;
}
.item:nth-child(3n) {
/* 去除第3n个的margin-right */
margin-right: 0;
}
</style>
方法二
css
复制代码
.item {
/* flex: 0 0 calc((100% - 10px)/3); */
width: calc((100% - 10px) / 3);
height: 120px;
background-color: pink;
/* 间隙为5px */
margin: 0 5px 5px 0;
}