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

相关推荐
清风不问烟雨z21 分钟前
不仅仅是 Mock 服务:mock-h3,让前端也能优雅拥有后端能力
前端·javascript·vite
前端老鹰22 分钟前
CSS backdrop-filter:给元素背景添加模糊与色调的高级滤镜
前端·css·html
Lsx_41 分钟前
TypeScript 是怎么去查找类型定义的?
前端·javascript·typescript
....4922 小时前
Vue3 + Element Plus 实现可搜索、可折叠、可拖拽的部门树组件
前端·javascript·vue.js
范范之交2 小时前
JavaScript基础语法two
开发语言·前端·javascript
bitbitDown3 小时前
重构缓存时踩的坑:注释了三行没用的代码却导致白屏
前端·javascript·vue.js
xiaopengbc3 小时前
火狐(Mozilla Firefox)浏览器离线安装包下载
前端·javascript·firefox
小高0073 小时前
🔥🔥🔥前端性能优化实战手册:从网络到运行时,一套可复制落地的清单
前端·javascript·面试
古夕3 小时前
my-first-ai-web_问题记录01:Next.js的App Router架构下的布局(Layout)使用
前端·javascript·react.js
Solon阿杰3 小时前
solon-flow基于bpmnJs的流程设计器
javascript·bpmn-js