[分享]css元素平均分布图

您是否曾经想过如何让网页上的元素平均分布？在这里我们将介绍使用CSS来实现元素平均分布的方法。

.container{
  display: flex;
  justify-content: space-between;
} 

以上代码是通过使用flexbox布局来实现元素平均分布的基本代码。其中，display: flex; 将.container元素设置为flex容器，flex容器内的元素都将会按照flexbox布局的规则进行排列。

justify-content: space-between; 则是用来定义排列方式的属性之一。它将flex容器内的元素平均分布在容器内，通过产生额外的空白区域（即间距）来实现。 在使用这个属性时，需要注意flex容器内的元素数量需要大于等于2个。

.container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
} 

另一个可以使用的方法是通过CSS网格布局来实现平均分布。可以使用 display:grid; 将元素设置为网格容器，使得内部元素能够在网格中自由布局。

grid-template-columns: repeat(3, 1fr); 设置将网格分为3个列，每一列的宽度都相等。

grid-gap: 10px; 设置元素之间的间距。

以上代码可以使得元素在容器内平均分布，并且每个元素之间都有一定的间距。

通过以上两种方法，均可实现元素在网页上平均分布。具体使用哪种方法取决于您的需求和个人喜好。