企业官网建设流程全解析

问题描述

我的代码是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: 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;简写形式，一次性设置放大、收缩和初始宽度，更高效。