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

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

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

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

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

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

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

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

相关推荐
y = xⁿ24 分钟前
关于Agent智能体开发
开发语言·前端·javascript
事圆则缓34 分钟前
Flutter 状态管理框架对比(一):先看地图,再选工具
前端·javascript·flutter
IMPYLH1 小时前
HTML 的 <tfoot> 元素
前端·javascript·html
鬼手点金1 小时前
Claude Code示范案例-修复 Bug 工作流
java·服务器·前端·javascript·bug·openclaw
paopaokaka_luck2 小时前
个人综合管理小程序(echarts数据看板、健康数据记录与趋势查看、目标拆解和进度管理、日程待办与番茄钟、习惯打卡、收支统计、个人生活记录、跨模块智能提醒)
前端·javascript·spring·小程序·数据分析·echarts·生活
福兮说10 小时前
前端下载大文件,点了按钮半天没反应:fetch + blob 的三个问题和三种替代写法
前端·javascript·性能优化·文件下载
今年下半年12 小时前
【VUE】整合腾讯地图、自定义区域边界、村委名称及资产统计(放大显示资产点位)
前端·javascript·vue.js
可乐鸡翅yeah_15 小时前
hls.js 切换多个视频源,新手开发常见踩坑
开发语言·前端·javascript·ios·ffmpeg·音视频·safari
kyriewen15 小时前
我实测了前端日期的 5 个坑:差 8 小时只是开始
前端·javascript·程序员
anew___15 小时前
《从零手写操作系统 (11):文件系统初探——initrd与VFS抽象层》
java·javascript·算法