Css 如何使用flexbox的安全中心？

居中的flexbox项目可能有不良行为

针对此问题提供了几种非flex解决方案，但有一个

safe

值，如下所述

align-items: safe center;

如果项目的大小溢出对齐容器，则项目将对齐，就像对齐模式已启动一样

它可以按如下方式使用

align-items: safe center;

不幸的是，我还没有找到任何关于这方面的例子或讨论，也没有确定有多少浏览器支持它

我已尝试使用

safe

。然而，这对我不起作用。

safe

似乎被忽略，或者容器元素的样式不正确

---

如果有人能解释一下

safe

，以及它是否以及如何被用来解决溢出问题，我将不胜感激，就像CodePen的例子所展示的那样。

safe关键字仍然是一个，而且还没有多少（如果有的话）浏览器支持它，所以为了获得同样的效果，跨浏览器，暂时使用，应在弹性项上设置

注意，要补偿

模态

的50px上/下边距，请在

模态容器

上使用

填充

---

safe

尚未在大多数浏览器中实现。您可以使用自动边距重新创建它的一些功能

我试图使用

justify content:safe center

在视口较宽时将一堆项目居中放置在页脚中，但在视口较小时，它们能够滚动而不从左侧剪切

当我按照Ason的建议尝试用自动边距来解决这个问题时，它确实解决了剪辑问题，但它也将项目均匀地分布，这不是我想要的

我发现在这种情况下，我可以通过仅对第一个和最后一个元素应用自动边距来模拟安全中心

假设我的flex项目具有类“item”：

---

Rachel Andrew在本书中讨论了安全对齐问题，其中还有一个问题。顺便说一句：当前安全对齐在firefox上工作

center-safe

在Chrome上工作84No，

center-safe

在Chrome上不工作。

.item:first-child {
    margin-left: auto;
}
.item:last-child {
    margin-right: auto;
}