[分享]css3平均分布多行

CSS3提供了多种方式来实现平均分布多行的效果，例如使用flex布局、grid布局、float布局等。下面我们就来一一介绍这些方法。/flex布局/ .container{ display: flex...

CSS3提供了多种方式来实现平均分布多行的效果，例如使用flex布局、grid布局、float布局等。下面我们就来一一介绍这些方法。

/*flex布局*/
.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}
.item{
  flex-basis: calc(33.33% - 10px);
  margin-bottom: 10px;
}

/*grid布局*/
.container{
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(30%, 1fr));
  grid-gap: 10px;
}

/*float布局*/
.item{
  width: calc(33.33% - 10px);
  margin-bottom: 10px;
  float: left;
  clear: none;
  box-sizing: border-box;
}
.item:nth-child(3n+1){
  clear: both;
} 

以上三种方法都能够实现多行均匀分布的效果，具体选择哪种方法取决于项目需求、浏览器兼容性等因素。但需要注意的是，对于IE浏览器，需要使用兼容性处理。

希望这篇文章能够帮助大家快速实现多行均匀分布的效果，提升页面的美观度和用户体验。