父元素代码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;
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐