无法滚动到容器溢出的d性项目的顶部

无法滚动到容器溢出的d性项目的顶部

问题
Flexbox使居中非常容易。

通过简单的应用

align-items: center

，并

justify-content: center

以柔性容器，你的Flex项目（S）将垂直和水平居中。

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

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

对于水平溢出，左侧部分不可访问（或在RTL语言中右侧部分）。

这是一个LTR容器包含justify-content: center三个flex项目的示例：

解决方案1

要解决此问题，请使用flexbox自动边距，而不是justify-content。

使用auto边距，可以将溢出的flex项目垂直和水平居中，而不会丢失对其任何部分的访问权限。

因此，而不是在flex容器上使用以下代码：

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

在flex项目上使用以下代码：

.flex-item {    margin: auto;}

修改后的演示

解决方案2（大多数浏览器尚未实现）
将safe值添加到关键字对齐规则，如下所示：

justify-content: safe center

要么

align-self: safe center

4.4。溢出对齐：safe和和unsafe关键字以及滚动安全限制

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

为了控制这种情况，可以明确指定溢出对齐方式。Unsafe对齐会在溢出情况下遵循指定的对齐方式，即使这会导致数据丢失，而safe对齐会在溢出情况下更改对齐方式，从而避免数据丢失。

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

safe

如果[flex item]的大小溢出[flex container]，则将[flex item]对齐，就好像对齐方式是[ flex-start]。

unsafe

无论[flex item]和[flex container]的相对大小如何，都应遵守给定的对齐值。

注意：“框对齐模块”可用于多个框布局模型，而不仅仅是flex。因此，在上面的摘录中，方括号中的术语实际上是“对齐主题”，“对齐容器”和“ start”。我使用了特定于flex的术语来保持对这个特定问题的关注。

MDN的滚动限制说明：

与CSS中的其他居中方法不同，Flexbox的对齐属性进行“真正”居中。这意味着即使d性项目溢出d性容器，d性项目也将保持居中。

但是，如果它们溢出页面的顶部边缘或左​​侧边缘，有时可能会出现问题，因为即使其中有内容，您也无法滚动到该区域！

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

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

无需使用

align

-属性，只需将auto边距放在要居中的d性项目上。

代替

justify

-属性，将自动页边距放在flex容器中第一个和最后一个flex项的外边缘上。

该

auto

利润率将“灵活”，并承担剩余的空间，围绕柔性物品时，有剩余的空间，并切换到正常的排列时，没有。

但是，如果您要替换

justify-content

多行

flexbox

中基于边距的居中，则可能不走运，因为您需要在每行的第一个和最后一个

flex

项目上放置边距。除非您可以提前预测哪些项目将在哪一行结束，否则您将无法可靠地在主轴中使用基于边距的居中中心来替换

justify-content

属性。