[转]无法滚动到溢出容器的Flex项的顶部
原文: http://www.imooc.com/wenda/detail/562829
flex容器里面的子元素,设置margin: auto 就可以了
--------------------------------------------------------------------------------------
无法滚动到溢出容器的Flex项的顶部
所以,在尝试使用Flexbox建立一个有用的模式时,我发现了一个似乎是浏览器问题的东西,我想知道是否有一个已知的修复或解决方法-或者关于如何解决它的想法。
我想解决的问题有两个方面。首先,获得垂直中心的模态窗口,这是按预期工作的。第二种方法是让模态窗口从外部滚动-因此整个模态窗口滚动,而不是其中的内容(这样您就可以有下拉列表和其他UI元素,这些元素可以扩展到模式边界之外-比如自定义日期选择器,等等)。
然而,当将垂直对中和滚动条组合在一起时,当模式的顶部开始溢出时,就会变得不可访问。在上面的例子中,您可以调整大小以强制溢出,这样做可以让您滚动到模态的底部,而不是顶部(第一段被切断)。
下面是示例代码的链接(高度简化)
https://jsfiddle.net/dh9k18k0/2/
.modal-container { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); overflow-x: auto;}.modal-container .modal-window { display: -ms-flexbox; display: flex; flex-direction: column; align-items: center; justify-content: center; // Optional support to confirm scroll behavior makes sense in IE10 //-ms-flex-direction: column; //-ms-flex-align: center; //-ms-flex-pack: center; height: 100%;}.modal-container .modal-window .modal-content { border: 1px solid #ccc; border-radius: 4px; background: #fff; width: 100%; max-width: 500px; padding: 10px}
这个效果(当前)火狐,Safari,Chrome和Opera。有趣的是,如果你在IE10供应商前缀CSS中发表评论的话,它在IE10中的行为确实是正确的-我还没有费心在IE11中进行测试,但假设它的行为与IE10的行为相匹配。
任何想法都是好的。链接到已知的问题或这种行为背后的推理也是有用的。
3 回答
![?](http://img2.sycdn.imooc.com/545865620001c45402760276-100-100.jpg)
问题
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
4.4.溢出对齐:
safe
和unsafe
关键词与滚动安全限值当[FLEX项]大于[FLEX容器]时,它将溢出。如果在这种情况下采用某些对齐模式,则可能会导致数据丢失:例如,如果侧边栏的内容居中,则当其溢出时,可能会将部分框发送到视口的起始边缘,无法滚动到。
要控制这种情况,溢流对准模式可以显式指定。
Unsafe
在溢出情况下,对齐遵守指定的对齐模式,即使它会导致数据丢失,而safe
在溢出情况下,对齐方式会更改,以避免数据丢失。默认行为是将对齐主题包含在可滚动区域内,尽管在编写此安全特性时尚未实现。
safe
如果[FLEX项]的大小溢出了[FLEX容器],则[FLEX项]将像对齐模式一样对齐[FLEX项]。
flex-start
].
unsafe
无论[FLEXItem]和[FLEX容器]的相对大小如何,给定的对齐值都是受尊重的。
注意:Box对齐模块用于多个盒子布局模型,而不仅仅是FLEX。因此,在上面的规范摘录中,括号中的术语实际上是“对齐主题”、“对齐容器”和“对齐容器”。start
“.我用了一些具体的术语来关注这个特定的问题。
MDN对滚动限制的解释:
Flexbox的对齐属性做“真”对中,不像CSS中的其他对中方法。这意味着FLEX项目将保持居中状态,即使它们溢出了FLEX容器。
但是,如果它们溢出到页面的顶部边缘或左侧边缘[.],这有时会有问题,因为您不能滚动到该区域,即使那里有内容!
在未来的版本中,将扩展对齐属性,使其具有“安全”选项。
现在,如果这是一个问题,您可以使用边距来实现对中,因为它们将以“安全”的方式响应,并且在溢出时停止对中。
而不是使用
align-
属性,只要把auto
您希望居中的弹性项目的页边距。而不是
justify-
属性,在Flex容器中的第一个和最后一个FLEX项的外部边缘放置自动边距。这个
auto
边距将“弯曲”,并假定剩余空间,当有剩余空间时,以弹性项为中心,如果没有,则切换到正常对齐。但是,如果你想替换
justify-content
以保证金为中心的多行挠曲盒,你可能是运气不好,因为你需要把第一个和最后一个挠性项目的每一行。除非您能够提前预测哪些项将在哪一行上结束,否则您无法可靠地使用位于主轴的基于保证金的中心位置来替换justify-content
财产。