Open metroluffy opened 5 years ago
最近一个项目中有做到一个图片预览的功能，图片需要居中显示，这样小图的情况位置不至于太尴尬，元素简单的情况下，使用flex布局最轻松，然而却也有坑，当flex子项大于flex容器溢出时，此方法有一个问题，顶部变得不可访问。预览时图片如下： 对比原图： 会发现顶部少了内容，此时无法上滚，即如前所述，顶部变得无法访问。
解决办法： 在子项的样式上增加一条
item { ... margin: auto; }
即可，注：此时子项不能使用绝对定位使之脱离文档流
【参考资料】 1.html – 无法滚动到溢出容器的flex项目的顶部
最近一个项目中有做到一个图片预览的功能，图片需要居中显示，这样小图的情况位置不至于太尴尬，元素简单的情况下，使用flex布局最轻松，然而却也有坑，当flex子项大于flex容器溢出时，此方法有一个问题，顶部变得不可访问。预览时图片如下：
对比原图：
会发现顶部少了内容，此时无法上滚，即如前所述，顶部变得无法访问。
解决办法： 在子项的样式上增加一条
即可，注：此时子项不能使用绝对定位使之脱离文档流
【参考资料】 1.html – 无法滚动到溢出容器的flex项目的顶部