css不确定元素个数等分 |css抖动效果代码

当大家需要等分固定个数的元素时，可以使用CSS中的calc()函数来实现。例如，将3个元素等分成4份，就可以使用如下代码：

.container {
display: flex;
justify-content: space-between;
width: calc(33.3333% - 10px);
}

然而，当元素个数不确定时就需要使用其他方法了。最常见的方法是使用伪元素来实现。大家可以给父元素设置display: flex，并使用::before伪元素来占据一定的空间，然后将子元素使用flex: 1来等分剩余的空间。

.container {
display: flex;
justify-content: space-between;
width: 100%;
position: relative;
}
.container::before {
content: "";
width: 16.6666%;
}
.item {
flex: 1;
}

以上代码将元素等分成6份，适用于大多数情况。如果需要更高的灵活性，也可以使用CSS的grid布局来实现。使用.grid-container设置网格布局，并使用grid-template-columns属性来设置列的数量和宽度。

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

以上代码将元素等分成可变数量的列，每列宽度最小为150px，当容器宽度增加时，列的数量也会相应增加。

总之，在等分不确定元素时，可以使用伪元素、grid布局等多种方法实现。开发者需要根据具体需求进行选择，来实现最优的效果。