css样式用flex 布局的时候元素尺寸展示不对
问题描述
我的代码是148px宽度，但是实际上显示的只有133px
问题根源
在 Flex 布局中，flex-shrink是flex 子元素的收缩属性，默认值是1，意思是：
- 当父元素的宽度不足以容纳所有子元素的宽度总和时，子元素会按照flex-shrink的数值比例自动收缩，以适应父元素的宽度。
- 你写的.main作为 flex 子元素时，因为flex-shrink: 1，父元素宽度不够的情况下，它就被收缩了 6px（164px →148px）。
你确认了问题根源是flex-shrink的默认收缩行为导致.main的宽度被压缩，从164px变成了148px，我会帮你梳理这个问题的本质和最终的解决方案。
二、最终修复后的完整代码
我把flex-shrink: 0添加到你的.main样式中，确保宽度不会被收缩：
.main { width: 164px; /* 你期望的宽度 */ height: 100%; background: #f8fafc; display: flex; align-items: center; padding: 24px 0px; flex-direction: column; gap: 6px; flex-shrink: 0; /* 禁止flex收缩，固定宽度 */ .item { width: 132px; height: 40px; } .line { width: 108px; height: 1px; } }三、补充：flex布局的三个核心属性
为了让你更好地掌握flex子元素的尺寸控制，这里简单说明flex的三个核心属性：
| 属性 | 作用 | 默认值 |
|---|---|---|
flex-grow | 子元素的放大比例 | 0（不放大） |
flex-shrink | 子元素的收缩比例 | 1（自动收缩） |
flex-basis | 子元素的初始宽度/高度 | auto（默认取元素自身尺寸） |
日常开发中，也可以用简写flex: 0 0 164px;（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 164px;），直接固定子元素的宽度，更简洁。
总结
- 问题根源是
flex-shrink: 1的默认行为，导致.main在父元素宽度不足时被收缩，宽度从164px变为148px。 - 添加
flex-shrink: 0;可以禁止flex子元素的收缩行为，让.main的宽度保持为你设置的164px。 - 也可以使用
flex: 0 0 164px;简写形式，一次性设置放大、收缩和初始宽度，更高效。