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;），直接固定子元素的宽度，更简洁。

总结

1. 问题根源是flex-shrink: 1的默认行为，导致.main在父元素宽度不足时被收缩，宽度从164px变为148px。
2. 添加flex-shrink: 0;可以禁止flex子元素的收缩行为，让.main的宽度保持为你设置的164px。
3. 也可以使用flex: 0 0 164px;简写形式，一次性设置放大、收缩和初始宽度，更高效。