问题

Flexbox使对中非常容易。

通过简单的应用align-items: center和justify-content: center对于FLEX容器，您的FLEX项将以垂直和水平为中心。

但是，当FLEX项大于FLEX容器时，此方法存在问题。

正如问题中所指出的，当FLEX项溢出容器时，顶部变得不可访问。

对于水平溢出，左侧部分变得不可访问(或右部分，在RTL语言中)。

下面是一个LTR容器的示例justify-content: center还有三件柔韧物品：

有关此行为的解释，请参阅此答案的底部。

解决方案1

若要修复此问题，请使用挠曲箱自动边距，而不是justify-content.

带着auto边距，溢出的挠曲项目可以垂直和水平中心，而不会失去对它的任何部分的访问。

因此，与FLEX容器上的代码不同的是：

#flex-container {
    align-items: center;
    justify-content: center;}

在Flex项上使用以下代码：

.flex-item {
    margin: auto;}

订正演示

解决方案2(尚未在大多数浏览器中实现)

添加safe值到关键字对齐规则，如下所示：

justify-content: safe center

或

align-self: safe center

从CSS盒对齐模块规范:

4.4.溢出对齐：safe和unsafe关键词与滚动安全限值

当[FLEX项]大于[FLEX容器]时，它将溢出。如果在这种情况下采用某些对齐模式，则可能会导致数据丢失：例如，如果侧边栏的内容居中，则当其溢出时，可能会将部分框发送到视口的起始边缘，无法滚动到。

要控制这种情况，溢流对准模式可以显式指定。Unsafe在溢出情况下，对齐遵守指定的对齐模式，即使它会导致数据丢失，而safe在溢出情况下，对齐方式会更改，以避免数据丢失。

默认行为是将对齐主题包含在可滚动区域内，尽管在编写此安全特性时尚未实现。

safe

如果[FLEX项]的大小溢出了[FLEX容器]，则[FLEX项]将像对齐模式一样对齐[FLEX项]。flex-start].

unsafe

无论[FLEXItem]和[FLEX容器]的相对大小如何，给定的对齐值都是受尊重的。

注意：Box对齐模块用于多个盒子布局模型，而不仅仅是FLEX。因此，在上面的规范摘录中，括号中的术语实际上是“对齐主题”、“对齐容器”和“对齐容器”。start“.我用了一些具体的术语来关注这个特定的问题。

MDN对滚动限制的解释：

FLEX项目注意事项

Flexbox的对齐属性做“真”对中，不像CSS中的其他对中方法。这意味着FLEX项目将保持居中状态，即使它们溢出了FLEX容器。

但是，如果它们溢出到页面的顶部边缘或左侧边缘[.]，这有时会有问题，因为您不能滚动到该区域，即使那里有内容！

在未来的版本中，将扩展对齐属性，使其具有“安全”选项。

现在，如果这是一个问题，您可以使用边距来实现对中，因为它们将以“安全”的方式响应，并且在溢出时停止对中。

而不是使用align-属性，只要把auto您希望居中的弹性项目的页边距。

而不是justify-属性，在Flex容器中的第一个和最后一个FLEX项的外部边缘放置自动边距。

这个auto边距将“弯曲”，并假定剩余空间，当有剩余空间时，以弹性项为中心，如果没有，则切换到正常对齐。

但是，如果你想替换justify-content以保证金为中心的多行挠曲盒，你可能是运气不好，因为你需要把第一个和最后一个挠性项目的每一行。除非您能够提前预测哪些项将在哪一行上结束，否则您无法可靠地使用位于主轴的基于保证金的中心位置来替换justify-content财产。