Javascript 具有动态填充和项目计数的Flexbox未正确调整大小

我创建了一个flexbox，其中的项目应该根据窗口大小随填充动态更改大小。不幸的是，有时我无法控制一行中项目的数量，它会随机返回到正确对齐和有时不正确对齐的状态之间。我非常确信代码中的某个地方有输入错误。当我有时选择一个数量的项目，我通常得到它减去一

代码笔：

$（'#slider1，#slider2'）。更改（函数（事件，用户界面）{
setItemsOnRow（parseInt（$（'#slider1'）.val（）），parseInt（$（'#slider2'）.val（））；
console.log（$（'#slider1'）.val（）+“”+$（'#slider2'）.val（））
});
函数setItemsOnRow（itemCount，paddingSize）{
常数偏移=0；
var innerWidth=$（窗口）.innerWidth（）-paddingSize*（itemCount+1）；
控制台.log（“主体：”+内部宽度）；
var maxItemWidth=innerWidth/itemCount-offset；
var maxItemHeight=maxItemWidth；
//所有项目
$（“.item”）
.css（“页边空白顶部”，填充大小）
.css（“左边距”，填充大小/2）
.css（“右边距”，填充大小/2）
.高度（maxItemHeight）
.宽度（最大项目宽度）；
$（'.item:n个子项（'+itemCount+'n+1'））
.css（“右边距”，填充大小/2）
.css（'margin-left'，paddingSize）
$（'.item:n个子项（'+itemCount+'n-'+itemCount+'））
.css（“右边距”，填充尺寸）；
}

.control{
宽度：100%；
背景：红色；
}
.集装箱{
宽度：100%；
显示：内联flex；
弯曲方向：行；
调整内容：灵活启动；
柔性包装：包装；
}
.项目{
背景颜色：绿色；
边框：1px纯黑；
过渡性质：全部；
过渡时间：0.45s；
过渡定时功能：易进易出；
}

项目


衬垫
1.
2.
3.
4.
5.
6.
7.
8.

您的大多数商品都有如下内容：

element.style {
    margin-left: 7.5px;
    margin-right: 7.5px;
}

但有几项具有以下特点：

element.style {
    margin-left: 15px;
    margin-right: 7.5px;
}

或者这个：

element.style {
    margin-left: 7.5px;
    margin-right: 15px;
}

显然，当项目换行时，这些不均匀的边距设置将导致项目未对齐

要使列对齐，所有项目的左右边距必须相等

---

（上面发布的边距值适用于应用程序中的一个特定设置。这些值随填充设置的不同而变化。但是，模式是稳定的：某些项目的水平边距相等，其他项目的左右边距加倍。）

当我有时选择一定数量的项目时，我通常得到的是负一：我想你可以用*

{box size:border box；}

来解决这个问题。你没有在这行中将paddingSize除以2：

.css（'margin-left'，paddingSize）

。也可以考虑使用CSS反（）函数来进行项目计数，这样会让你的生活更轻松。