为何flex:0会覆盖width属性？Flexbox布局技术问询

核心问题：简写规则的误解 #

不少资料会错误宣称 flex: 0 等同于 flex: 0 0 auto，但根据CSS Flexbox规范，两者的实际解析结果完全不同，这正是你遇到问题的根源。

Flex属性的简写规则 #

flex 是 flex-grow、flex-shrink、flex-basis 三个属性的简写，不同参数数量对应不同默认值：

• 仅指定一个数值（如 flex: 0）：该值分配给 flex-grow，flex-shrink 取默认值 1，flex-basis 取默认值 0%。实际解析为：

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 0%;
  

• 指定两个数值（如 flex: 0 0）：第一个值为 flex-grow，第二个为 flex-shrink，flex-basis 默认值为 0%。
• 指定三个值（如 flex: 0 0 auto）：分别对应三个属性，无默认值填充。

代码异常的原因 #

在你的测试场景中：

1. 使用 flex: 0 时：
   • flex-basis: 0% 将元素基准尺寸设为0，且Flex布局中 flex-basis 优先级高于 width，因此你设置的 width: 120px 被忽略。
   • flex-shrink: 1 允许元素在容器空间不足时收缩，最终元素被压缩到内容最小宽度，导致文字换行、高度溢出。
2. 使用 flex: 0 0 auto 时：
   • flex-basis: auto 会让元素参考自身 width 确定基准尺寸，width: 120px 生效。
   • flex-shrink: 0 禁止元素收缩，确保元素保持设置的宽度，呈现预期的横向排列效果。

验证与修正 #

要让代码达到预期效果，有两种方式：

• 直接使用完整写法：flex: 0 0 auto
• 保留 flex: 0 并补充必要属性：

  .menuitem {
    width: 120px;
    padding: 3px;
    text-align: center;
    font-family: Arial;
    font-size: 16pt;
    font-weight: bold;
    flex: 0;
    flex-shrink: 0;
    flex-basis: auto;
  }
  

内容的提问来源于stack exchange，提问作者Shane Sanderson