Css 水平居中固定大小列表项的可变数量

我希望在这个问题上有一些眼睛和观点，我正面临着flexbox和网格。我将有一个列表中的项目数量可变（如在一个图像画廊），但每个项目的大小将是固定的。现在，我需要将列表项水平居中，并使它们始终对齐

html{
框大小：边框框；
}
p{
填充：1em；
}
.包装纸{
最大宽度：100%；
最小高度：500px；
填充：2em 0；
背景：番木瓜；
边框：1px实心橙色；
溢出：隐藏；
显示器：flex；
证明内容：中心；
}
保险商实验室{
显示器：flex；
背景：迷迭香；
宽度：100%；
调整内容：灵活启动；
柔性包装：包装；
边缘：1米；
边框：1px纯蓝色；
填充：0；
}
李{
显示：块；
背景：印度红；
宽度：200px；
高度：200px；
边缘：.1米；
/*填充：1em*/
颜色：白色；
字号：2rem；
文本对齐：居中；
显示器：flex；
证明内容：中心；
对齐项目：居中；
自我调整：伸展；
边框：1px固体蓝色；
}
李迪夫{
显示：内联块；
}

弗斯特


第二


第三


第四


第五

除了

li

元素外，您要做的是将

内容：中心对齐
和
项目：中心对齐
到
ul
。这可以从下面的和中看出


html{
框大小：边框框；
}
p{
填充：1em；
}
.包装纸{
宽度：100%；
最小高度：500px；
填充：2em 0；
背景：番木瓜；
边框：1px实心橙色；
溢出：隐藏；
显示器：flex；
证明内容：中心；
}
保险商实验室{
显示器：flex；
背景：迷迭香；
宽度：100%；
证明内容：中心；
对齐项目：居中；
柔性包装：包装；
边缘：1米；
边框：1px纯蓝色；
填充：0；
}
李{
显示：块；
背景：印度红；
宽度：200px；
高度：200px；
边缘：.1米；
/*填充：1em*/
颜色：白色；
字号：2rem；
文本对齐：居中；
显示器：flex；
证明内容：中心；
对齐项目：居中；
自我调整：伸展；
边框：1px固体蓝色；
}
李迪夫{
显示：内联块；
}
/*李：第一个孩子{
衬垫：
}*/


我的目标是在以下约束条件下水平居中显示可变数量的红色框：

1。红盒宽度保持不变。

2。所有框都应该对齐，就像网格一样。

3。每行方框应有相同的起点（结果为2）


如图所示：：：那么这可以通过Flexbox解决，还是我需要CSS网格？



弗斯特


第二


第三


第四


第五


是否正在查找
调整内容：周围空格
？使用
调整内容：周围空格
，第二行与第一行失去对齐。理想的情况是，如果
justify content:flex start
可以居中..当然，嗯。。这个线程听起来像flexbox无法实现这一点。我想知道如何使用CSS网格来实现它？仅供参考，由于
li
设置为
display:flex
，其
div
子屏幕上的
display:inline block
没有任何效果：感谢您的快速回答，但请注意，当屏幕变短时，第二行中的框不再与第一行对齐。：/理想的做法是
justify content:flex start
行为，但要以整个事情为中心。