flex子项内容超出flex容器范围，flex子项顶部内容被遮住

FuisonDesign 发布于2019-08-29 16:35 / 659人阅读

摘要：子项内容超出容器范围，子项顶部内容被遮住我们经常用布局方式来实现垂直居中对齐，但是当内容高度是动态变化且超出了容器的高度时，无法滚动到顶部，导致顶部的内容无法访问。

flex子项内容超出flex容器范围，flex子项顶部内容被遮住

我们经常用flex布局方式来实现垂直居中对齐，但是当内容高度是动态变化且超出了flex容器的高度时，无法滚动到顶部，导致顶部的内容无法访问。

以往的弹窗效果都是用插件来实现，这次一个简单的页面不想引入那么多插件，自己动手丰衣足食。

弹窗要求：

上下左右居中对齐；

需要考虑到内容超过一屏或者不够一屏的伸缩性；

这些都是简单货，代码如下： jsFiddle效果

缺陷：

内容已经超过了一屏，很明显最上面的内容是03，并不是实际最顶部的内容；
如果把内容删掉一些，会发现是位置是居中的，效果正常。
问题是在内容超出一屏的时候就无法看到最顶部的内容。

解决方法：

给flex子项设置margin:auto;，也就是

.popContainer{ margin: auto; }

弹窗居中对齐效果

博客地址

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113846.html

flex子项内容超出flex容器范围，flex子项顶部内容被遮住

摘要：子项内容超出容器范围，子项顶部内容被遮住我们经常用布局方式来实现垂直居中对齐，但是当内容高度是动态变化且超出了容器的高度时，无法滚动到顶部，导致顶部的内容无法访问。 flex子项内容超出flex容器范围，flex子项顶部内容被遮住我们经常用flex布局方式来实现垂直居中对齐，但是当内容高度是动态变化且超出了flex容器的高度时，无法滚动到顶部，导致顶部的内容无法访问。以往的弹窗效果...

LiuZh 2019-08-05 14:50 评论0 收藏0
结合CSS3的布局新特征谈谈常见布局方法

摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。常见的页面布局在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

xuhong 2019-08-28 18:31 评论0 收藏0
结合CSS3的布局新特征谈谈常见布局方法

摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。常见的页面布局在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

cnTomato 2019-08-01 15:01 评论0 收藏0
css3 flex弹性盒子布局梳理，打通任督二脉

摘要：挺早就接触了的布局，深入使用也就是在近期移动端开发。属性用于设置或检索弹性盒模型对象的子元素如何分配空间。所以，项目之间的间隔比项目与边框的间隔大一倍。默认值是，也就是不进行缩放，占原来元素内容宽度大小。　　挺早就接触了css的flex布局，深入使用也就是在近期移动端开发。老来多健忘，只能自己梳理一下知识点，当做温故知新吧。，请原谅小白的才疏学浅，写的不到位的地方请指正。　　flex属性...

Yumenokanata 2019-04-23 13:09 评论0 收藏0
给萌新的Flexbox简易入门教程

摘要：我们会在本文给出一个易于理解的入门介绍。项的顺序的属性另外一个的能力，是能够轻松改变元素的显示顺序。她想让成为页面的第一个元素，显示在之前。可接受的值有，或者一个数字后面紧跟着，，或其他长度单位。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文出处：https://www.sitepoint.com/flexbox-css-flexible-...

KavenFan 2019-04-23 13:10 评论0 收藏0