效果图
代码
<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;margin: 0 5px 5px 0;}.item:nth-child(3n) {margin-right: 0;}
</style>
方法二
.item {width: calc((100% - 10px) / 3);height: 120px;background-color: pink;margin: 0 5px 5px 0;
}
