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

相关推荐
前端Hardy4 分钟前
别再无脑用 `JSON.parse()` 了!这个安全漏洞你可能每天都在触发
前端·javascript·vue.js
前端Hardy6 分钟前
别再让 `console.log` 上线了!它正在悄悄拖垮你的生产系统
前端·javascript·vue.js
青青家的小灰灰10 分钟前
从入门到精通:Vue3 ref vs reactive 最佳实践与底层原理
前端·vue.js·面试
OpenTiny社区22 分钟前
我的新同事是个AI:支持skill后,它用TinyVue搭项目还挺溜!
前端·vue.js·ai编程
李剑一41 分钟前
大屏天气展示太普通?视觉升级!用 Canvas 做动态天气遮罩,雷阵雨效果直接封神
前端·vue.js·canvas
Lee川1 小时前
现代Web开发中的CSS继承、Flexbox布局与LocalStorage交互:从文档解析到实践应用
前端·css
csdn飘逸飘逸1 小时前
Autojs基础-用户界面(ui)
javascript
炫饭第一名1 小时前
速通Canvas指北🦮——图形、文本与样式篇
前端·javascript·程序员
本末倒置1831 小时前
面向 Vue 开发者的 Next.js 快速入门指南
前端·vue.js
进击的尘埃1 小时前
React useEffect 的闭包陷阱与竞态条件:你以为的 cleanup 真的在正确时机执行了吗
javascript