Css 使用Flexbox将最后一行元素居中

当我将窗口调整到更小的分辨率时，我希望最后一个元素居中。我知道我可以通过将父级的

justify content

参数设置为

space around

或

center

，来实现这一点，但必须将其设置为：

space between

ul{
显示器：flex；
证明内容：之间的空间；
柔性包装：包装；
背景：rgba（255,0,0,0.3）；
填充：0；
}
李{
列表样式类型：无；
显示：内联块；
最小宽度：100px；
高度：100px；
背景：红色；
利润率：10px；
}

使用自动边距

margin: 10px auto;

这就是你所期望的吗？

---

不幸的是，

flexbox

无法解决您的问题。但是我有一个CSS黑客来解决这个问题。以

媒体查询中的最后一个元素为目标。我在下面使用了自定义断点


ul{
显示器：flex；
证明内容：之间的空间；
柔性包装：包装；
背景：rgba（255,0,0,0.3）；
填充：0；
}
李{
列表样式类型：无；
显示：内联块；
最小宽度：100px；
高度：100px；
背景：红色；
利润率：10px；
}
@介质（最小宽度：376px）和（最大宽度：494px）{
李：最后一个孩子{
利润率：10px自动；
}
}





这是不可能的。说

如果[…]行上只有一个项目，则此值
与相同

唯一的方法是手动进行对齐，例如使用媒体查询和自动边距。但是这样的布局就不会灵活了。
这不是你想要的吗？不，正如我所说的：ul的内容必须是间隔的。不完全是。我希望顶行中的左元素最大限度地与左侧对齐，右元素最大限度地与右侧对齐。在您的解决方案中，元素和页边距之间仍然有一个空格。应用于最后一个元素的CSS属性可以实现这一点。非常感谢。