[分享]css中平均分布的代码

在CSS中，我们常常需要平均分布元素，比如将多个子元素均匀地排列在父元素中。下面是一些实用的CSS代码，帮助我们实现该功能。.parent { display: flex; justifyconten...

在CSS中，我们常常需要平均分布元素，比如将多个子元素均匀地排列在父元素中。下面是一些实用的CSS代码，帮助我们实现该功能。

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

/* 上述代码将子元素平均分布在父元素中间 */

.parent {
  display: flex;
  justify-content: space-evenly;
}

/* 上述代码将子元素平均分布在父元素中间，且空间分配更为均匀 */

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* 上述代码将子元素自适应地分布在父元素中，并保证每个子元素宽度大于等于200px */

.parent {
  display: flex;
  justify-content: center;
}

.parent > * {
  flex: 1;
}

/* 上述代码将子元素平均分布在父元素中央，父元素和子元素高度相等 */

.parent {
  display: flex;
  justify-content: center;
}

.parent > * {
  margin: 0 5px;
  width: calc((100% - 60px) / 3);
}

/* 上述代码将三个子元素平均分布在父元素中央，并且子元素之间的距离为5px，父元素和子元素高度相等 */ 

以上代码可以让我们轻松实现在CSS中平均分布元素的功能，具体使用时可以根据实际情况进行选择。