使用displsy:flex + overflow:hidden时子元素被压缩

博客地址

以下结构就很可能会发生子元素被压缩:

  ul {display: flex;overflow: hidden;li {display: flex;}}

效果:

此时我的目的是做一个轮播图,想让ul在div中使用关键帧播放,做到这个效果而且元素不被压缩的话可以使用下面这个结构:

        <div class="containerLimted"><ul class="theRoulousChartContainer controlerFlag revolveControler"><li class="firstImage containerLimtd"></li><li class="secondImage containerLimtd"></li><li class="thirdImage containerLimtd"></li><li class="fourthImage containerLimtd"></li><li class="endImage containerLimtd"></li></ul></div>

为外层的div设置高度,宽度,overflow:hidden,
ul设设置高度不设置宽度,display:flex即可
li设为display:flex
此时即可实现滚动

关于滚动的关键帧:

此时可以实现滚动一次,暂停一会,具体暂停多少时间,是根据animation的总时长和百分比进度决定的

@keyframes revolve {0%,15% {margin-left: -88rem;}25%,35% {margin-left: -66rem;}45%,55% {margin-left: -44rem;}65%,75% {margin-left: -22rem;}85%,100% {margin-left: 0rem;}
}

使用displsy:flex + overflow:hidden时子元素被压缩相关推荐

设置子父元素overflow:hidden，子元素absolute不显示问题
需求描述 vue项目用的vue-awesome-swiper插件实现下图结果: 为什么溢出来的元素自然就隐藏了解决首先我想到了给swiper容器overflow-x:hidden然后overf ...
flex 换主轴后子元素占满_Chrome72 嵌套 flex 布局修改，你的网站可能会发生布局错乱...
起源 2019 年 1 月 29 日,Chrome72 正式版(72.0.3626.81)发布,本次发布带来了一个改变,且没有在更新日志中提及,该改变导致某些网站发生了布局错乱.该改变主要针对的是嵌套 ...
flex 换主轴后子元素占满_Flex布局
在没有接触Flex之前一直使用float.display.position .说实话用起来非常恶心.当使用Flex时,我们可以简洁优雅实现复杂的页面布局 1.Flex 布局? 在 flex 容器中默认 ...
flex 换主轴后子元素占满_css flex justify-content属性，子元素在主轴上的对齐方式。...
css flex justify-content属性,子元素在主轴上的对齐方式. justify-content属性控制子元素在主轴上的对齐方式,支持flex-start . flex-end . c ...
flex布局：子子元素过大撑开了设定flex：1的子元素的解决方案
2019独角兽企业重金招聘Python工程师标准>>> 让p3脱离文旦流,不影响外层flex布局: p2设置相对定位,p3设置绝对定位设置p2的overflow不为visible, ...
flex 换行每行子元素对齐
display: flex;flex-direction: row;flex-wrap: wrap;align-items: stretch;
理解overflow:hidden
overflow:hidden意为清除浮动主要有三个作用第一隐藏溢出当div中的文字超出了div的容量,加上overflow:hidden;超出容量的文字,便不再显示第二清除浮动父div中有 ...
flex 子元素占满剩余高度与 flex:1 的子元素 overflow:hidden 失效
这几天使用flex开发大屏,遇到一个印象比较深的问题就是flex的子元素,在其他兄弟元素的高度不定的情况下,如何占满父元素的剩余空间? 效果图: 要点就是: 1.父元素要设置 display: fle ...
怎么样使父元素的overflow:hidden不影响到子级absolute绝对定位元素
在项目中使用了popover组件,由于父级设置了overflow:hidden,当子级长度超出时,即使子元素是绝对定位元素也受到了影响. 查了很多资料,发现只要父级元素不设置position:rela ...

使用displsy:flex + overflow:hidden时子元素被压缩

使用displsy:flex + overflow:hidden时子元素被压缩相关推荐

最新文章

热门文章