css 怎么让块平均分配

CSS中要让块平均分配是一种常见的需求。下面介绍一些常用的方法。

/*方法一：使用flex布局*/
.container {
  display: flex;
  justify-content: space-between;
}
/*如果块数不确定，可以使用flex-wrap属性*/
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/*方法二：使用网格布局*/
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  grid-gap: 20px;
}
/*repeat(auto-fit,1fr))是设置每列最小宽度为200px，最大为1fr，自适应排列*/

/*方法三：使用calc()*/
.container div {
  width: calc(33.33% - 10px);
  /*需要考虑每个块之间的间隔，这里间隔为10px*/
  margin-right: 10px;
}
/*如果块数不确定，可以使用:nth-child(n)选择器*/

以上三种方法都可以实现块平均分配的效果，需要根据实际情况选择合适的方法。