flex布局可很容易实现内部元素的垂直水平居中。遇到一个问题，即子元素的高度超出flex父元素之后，顶部的子元素无法完全显示出来，而底部可以。
如图：上部的叉叉按钮和卡片的头部已经跑到了屏幕的上方，被遮盖住，滑不下来。
屏幕快照 2019-11-04 下午3.53.29.png
正常的应该是：
屏幕快照 2019-11-04 下午3.54.45.png
解决方法：
设置子元素的 margin: auto 。
flex布局可很容易实现内部元素的垂直水平居中。遇到一个问题，即子元素的高度超出flex父元素之后，顶部的子元素无法完全显示出来，而底部可以。
如图：上部的叉叉按钮和卡片的头部已经跑到了屏幕的上方，被遮盖住，滑不下来。
屏幕快照 2019-11-04 下午3.53.29.png
正常的应该是：
屏幕快照 2019-11-04 下午3.54.45.png
解决方法：
设置子元素的 margin: auto 。
flex布局可很容易实现内部元素的垂直水平居中。遇到一个问题，即子元素的高度超出flex父元素之后，顶部的子元素无...
flex布局左边固定，右边自适应，右边内容超出会影响布局 修改后显示效果
参考资料：《Flex 布局教程：语法篇》 设置为Flex布局后（display: flex;），子元素的float...
概述： flex全称为flexible box 译为弹性布局 flex布局生效后 子元素的 float verti...
flex布局容器 flex布局容器需要设置成display:flex;他的子元素float失效，子元素的块状特性也...
flex 1，flex布局又叫弹性布局，一个元素为flex布局时，子元素的float、clear和vertical...
1、Flex布局：设置父元素为 display:flex; flex-direction:row; 子元素会被...
Flex布局 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元...
一、Flex简介 Flex布局是弹性布局，用来为盒状模型提供最大的灵活性。当把容器设为Flex布局后，子元素的fl...
flex简介采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素...
本文标题：flex 布局 超出后上部子元素无法完全显示
本文链接：https://www.haomeiwen.com/subject/kbsdbctx.html
网友评论