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

相关推荐
神探小白牙2 小时前
eCharts 多系列柱状图增加背景图
javascript·ecmascript·echarts
ZhengEnCi2 小时前
M5-markconv自定义CSS样式指南 📝
前端·css·python
xingpanvip2 小时前
星盘接口开发文档:星相日历接口指南
android·开发语言·前端·css·php·lua
追风筝的人er4 小时前
SpringBoot+Vue3 企业考勤如何处理法定假期?节假日方案、调休补班与工作日判断链路拆解
前端·vue.js·后端
yqcoder6 小时前
CSS 外边距重叠(Margin Collapsing):现象、原理与完美解决方案
前端·css
山楂树の6 小时前
图像标注大坑:img图片 + Canvas 叠加标注,同步放大后标注位置偏移、对不齐?详解修复方案及亚像素处理原理
前端·css·学习·canva可画
编程老船长7 小时前
解决不同项目需要不同 Node.js 版本的问题
前端·vue.js
薛定猫AI8 小时前
【深度解析】Gemma Chat 本地 AI 编程 Agent:Electron + MLX + 开源模型的离线 Vibe Coding 实战
javascript·人工智能·electron
全栈前端老曹9 小时前
【前端地图】多地图平台适配方案——高德、百度、腾讯、Google Maps SDK 差异对比、封装统一地图接口
前端·javascript·百度·dubbo·wgs84·gcj-02·bd09
笑虾9 小时前
Win10 修改注册表 让鼠标悬停PNG上时 tip 始终显示分辨率
开发语言·javascript·ecmascript