效果图
文章来源地址https://www.toymoban.com/news/detail-727474.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>
方法二
.item {
/* flex: 0 0 calc((100% - 10px)/3); */
width: calc((100% - 10px) / 3);
height: 120px;
background-color: pink;
/* 间隙为5px */
margin: 0 5px 5px 0;
}
文章来源：https://www.toymoban.com/news/detail-727474.html
到了这里，关于完美解决 flex 实现一行三个，显示多行，左对齐的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
