Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)

新入职,就被调整页面样式折磨得头大,目前搜索条件得label没有右对齐,我统一设置了labelwidth,可依旧不生效,有的对齐了,有的没有对齐,着时头大

找了很多方法,终于让我完美解决了,没想到解决方法这么简单:

解决方法很简单, 就是使用 flex-shrink 属性;

flex-shrink 属性定义了项目的缩小比例,默认为1 即如果空间不足,该项目将缩小,它还有另外一个值,就是0

如果在子元素的 css 样式中添加 flex-shrink 属性, 然后把值改为 0 flex-shrink:0 ,那么当前元素就不会被其他子元素挤压

因为input元素设置了width: 100% 所以这个元素尽可能撑大,挤压到后面元素了

解决方法: 给元素设置 flex-shrink:0 即可

相关推荐
12.=0.3 分钟前
【REVIEW_C】【持续更新】
服务器·前端·javascript
一颗烂土豆28 分钟前
ECharts 太平面?试试这款 Vue 3D 图表库
前端·vue.js·echarts
Hilaku1 小时前
为什么同一段代码在 Safari 上永远有 Bug?
前端·javascript·程序员
张元清1 小时前
React scrollIntoView + useRef:滚动到指定元素 (2026)
javascript·react.js
BreezeJiang1 小时前
别再背工厂模式了:NestJS 第一行代码就是它的工业级落地
前端·javascript
渣波1 小时前
深度解析工厂模式:从蜜雪冰城到 NestFactory,彻底搞懂“创建与使用分离”
前端·javascript
用户059540174462 小时前
把大模型记忆召回测试从 30 分钟手工核对压到 3 秒自动化,pytest + FAISS 这套组合救了我
前端·css
雪芽蓝域zzs2 小时前
新建前端pnpm(vue js ) 仿若依项目(一)
前端·javascript·vue.js
vipbic2 小时前
网站升级了,我却有点舍不得
前端·vue.js·后端
kaixin_learn_qt_ing2 小时前
Electron程序---初体验
javascript·electron