因为设置了display: flex; 导致block布局变成了flex布局, 所以如果想要在已经设置了flex布局的基础上,再进行子元素宽度的设置,可以应用下面的样式:(在该子元素上设置)
flex-shrink: 0;
width: 100rpx;
这样就可以啦~快去试试吧~
另外遇到的一个问题:
在 flex:1 下的元素中,如果文字很长就会超出容器,而不是呆在设置好的动态剩余的空间中。。。
解决办法:在 flex:1 下的元素下添加样式,可达到效果:
方法一:
overflow: hidden;
方法二:
width: 0;