flex 布局引起的元素宽度失效问题
flex 布局引起的元素宽度失效问题
有些 bug,一不注意可能排查半天都排查不出来,而它恰恰又是你自己造成的...
如下 bug 效果图,卡片样式写的好好的,图片下面的详细信息字段样式代码都是同一个(最后一行土地坐落设置的宽度是 100%,其他几个字段都是 50%),突然最后一行土地坐落抽筋了
bug 效果
预期效果
原因
愣了一下,调了几个 CSS 属性发现还是这样...到底是哪个样式写错了,起冲突了?
- 好在没过多久就觉得似曾相识,刚开始接触 flex 布局的时候好像看到过这个"效果"
- 之前内容比较多,通过
display: flex;
给元素设置 flex 布局的时候就会这样,然后我调整样式就调好了,这不就是还没调样式的样子吗?
让我们来回顾一下阮一峰老师 Flex 文章的基本知识 Flex 布局教程:语法篇(非常感谢阮一峰老师的分享!)
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。- 如果所有项目的
flex-shrink
属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。
(所以就算我给 图标和土地坐落这个字段设置了宽度,也没生效)
解决方案
既然知道了是 flex-shrink
属性在作祟,那我们就做了它!
给左侧两个元素设置上 flex-shrink: 0;
来避免被拉伸,右侧的文本就让它接着用默认值 1,自由拉伸,占据剩余的空间
.cardInfoItem text:nth-last-child(2) {
flex-shrink: 0;
}
.cardInfoItem image {
width: 28rpx;
margin-right: 14rpx;
flex-shrink: 0;
}
加上 flex-shrink: 0;
后,就达到了预期效果~