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

相关推荐
某柚啊7 分钟前
iOS移动端H5键盘弹出时页面布局异常和滚动解决方案
前端·javascript·css·ios·html5
心.c8 分钟前
如何学习Lodash源码?
前端·javascript·学习
井柏然42 分钟前
从 Monorepo 重温 ESM 的模块化机制
前端·javascript·前端工程化
晓得迷路了42 分钟前
栗子前端技术周刊第 102 期 - Vite+ 正式发布、React Native 0.82、Nitro v3 alpha 版...
前端·javascript·vite
XXX-X-XXJ1 小时前
Vue Router完全指南 —— 从基础配置到权限控制
前端·javascript·vue.js
云和数据.ChenGuang1 小时前
vue钩子函数调用问题
前端·javascript·vue.js
鹏多多1 小时前
React动画方案对比:CSS动画和Framer Motion和React Spring
前端·javascript·react.js
咖啡の猫1 小时前
Vue内置指令与自定义指令
前端·javascript·vue.js
昔人'2 小时前
使用css `focus-visible` 改善用户体验
前端·css·ux
艾小码2 小时前
告别数据混乱!掌握JSON与内置对象,让你的JS代码更专业
前端·javascript