irpas技术客

flex布局子元素高度设置无效的解决办法_ycg5250_flex height无效

网络投稿 3856

父元素代码css代码

关键代码是flex-shrink: 0; 当指定view为flex布局后,给子元素定义width和height是不起效果的。原因:定义为flex布局元素的子元素,自动获得了flex-shrink的属性,这个属性是什么意思呢?就是告诉子元素当父元素宽度不够用时,自己调整自己所占的宽度比,这个flex-shrink设置为1时,表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为0时,表示大家都不缩小适应。

所以,倘若给父元素设置了flex布局后,若要其子元素的width和height有效果,必须给子元素设置flex-shrink为0。

.scrollLrc{ display: flex; height: 120rpx; overflow: hidden; flex-direction: column; align-items: center; } 子元素元素代码css代码 .lyricItem{ height: 40rpx; flex-shrink: 0; }


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签: #flex #height无效