Html Flexbox显示动态项目数，每行5个项目，使用flex basis消耗额外空间

我想用flexbox显示每行5个项目

。父包装器{
身高：100%；
宽度：181px；
边框：1px纯黑；
}
.家长{
显示器：flex；
字号：0；
柔性包装：包装；
裕度：-10px0-10px；
}
.孩子{
显示：内联块；
背景：蓝色；
利润率：10px 0 10px；
弹性：1计算（100%*（1/5）-10px-1px）；
高度：100px；
}

---

如果我理解正确，那么您似乎在寻找

justify content

属性。您希望删除项目后面的空间，同时防止项目拉伸。通过设置

justify content:space-between

，可以达到所需的效果。它将在项目之间创建一个均匀的空间，但不是在项目之后或之前。我还设置了

flex-grow:0

，因为我假设您不希望项目增长或收缩

如果

间距

不是您需要的布局，这里有一个链接，列出了

调整内容

的所有可能值。例如，您还可以选择

将项目居中

以消耗额外空间

。父包装器{
身高：100%；
宽度：181px；
边框：1px纯黑；
}
.家长{
显示器：flex；
字号：0；
柔性包装：包装；
裕度：-10px0-10px；
对齐内容：间距；/*项目之间的间距均匀*/
}
.孩子{
显示：内联块；
背景：蓝色；
利润率：10px 0 10px；
弹性：0 0计算（100%*（1/5）-10px-1px）；/*弹性增长设置0（无），弹性收缩设置0*/
高度：100px；
}

---

我为您创建了一个示例，您可以试试

.container{
显示器：flex；
柔性包装：包装；
弯曲方向：行；
证明内容：中心；
宽度：600px；
高度：300px；
边框：实心1px；
对齐项目：居中；
}
.项目{
宽度：100px；
高度：70像素；
右边距：5px；
显示：内联块；
边框：实心1px；
}

可能重复：相关-不太可能，我希望下一行4项与第一行5项一样对齐。最后5个项目将留空。如果没有flex grow=1，当我调整页面大小时，它将显示后面的额外空间。未充分利用空间。如果要在调整窗口大小时向下移动项目，则必须以百分比形式设置容器块的宽度和高度。是否可以使用flex grow=1并保持下一行数据与其他行数据相同的宽度？