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 即可

相关推荐
雪碧聊技术1 分钟前
ElementPlus徽章组件:展示日期面板每天未完成的待办数量
vue.js·日期选择器·elementplus·el-badge徽章组件
go_caipu25 分钟前
Vben Admin管理系统集成qiankun微服务(二)
前端·javascript
幻云201028 分钟前
Next.js指南:从入门到精通
开发语言·javascript·人工智能·python·架构
唐叔在学习28 分钟前
insertAdjacentHTML踩坑实录:AI没搞定的问题,我给搞定啦
前端·javascript·html
小王和八蛋44 分钟前
前端存储与离线应用实战:Cookie、LocalStorage、PWA 及 Service Worker 核心知识点
前端·javascript
军军君011 小时前
Three.js基础功能学习七:加载器与管理器
开发语言·前端·javascript·学习·3d·threejs·三维
哈__1 小时前
React Native 鸿蒙开发:内置 Share 模块实现无配置社交分享
javascript·react native·react.js
沐墨染1 小时前
敏感词智能检索前端组件设计:树形组织过滤与多维数据分析
前端·javascript·vue.js·ui·数据挖掘·数据分析
为自己_带盐1 小时前
在 Blazor Server 中集成 docx-preview.js 实现高保真 Word 预览
javascript·c#·word
Kapaseker2 小时前
前端已死...了吗
android·前端·javascript