为什么 flex: 0;覆盖宽度属性？

Question

这是我教授网页设计的第一年，我们正在讨论弹性盒布局。我遇到了 flex 属性的问题，我无法在任何地方找到解释。

我使用各种资源对此进行了审查，所有资源都表明将 flex 设置为 0 与将其设置为 flex: 0, 0, auto 相同。在这种情况下，auto 将使用 Flex 项目的 width 属性作为其 flex-basis 值。然而，我发现这不是真的。当使用 flex:0 的简写方法（正如大多数资源所建议的那样）时，这会覆盖我的宽度值。

这是 HTML：

<nav id="menu">

    <div id="Item1" class="menuitem">Item 1</div>
    <div id="Item2" class="menuitem">Item 2</div>
    <div id="Item3" class="menuitem">Item 3</div>
    <div id="Item4" class="menuitem">Item 4</div>
    <div id="Item5" class="menuitem">Item 5</div>

</nav>

这是相关的CSS：

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

这是我根据我的研究预期会发生的情况（使用

flex: 0, 0, auto;

的 Flexbox 行）：

但是，这是我得到的结果（使用

flex:0;

的 Flexbox 行）：

当我使用较长的版本时，

flex: 0, 0, auto;

，我所有的物品尺寸都正确。

很想知道是否有人能解释为什么会发生这种情况，我可以将其传递给我的学生。

Answer 1

当您设置

flex: 0;

时，您将忽略

flex-shrink

和

flex-basis

组件。 规范的相关部分说：

<‘flex-shrink’>

[...] 省略时，设置为 1。

<‘flex-basis’>

[...] 当从 flex 简写中省略时，其指定值为 0。

所以

flex: 0;

相当于

flex: 0 1 0;

，这就是为什么你看到元素缩小/不使用它们的主要尺寸（宽度）。

您可能正在寻找的是

flex: none;

，它相当于

flex: 0 0 auto;

。

这是使用

flex: none;

的片段：

#menu { display: flex; }
.menuitem { width: 120px;
            padding: 3px; 
            text-align: center;
            font-family: Arial;
            font-size: 16pt;
            font-weight: bold;
            flex: none;
            }

<nav id="menu">

    <div id="Item1" class="menuitem">Item 1</div>
    <div id="Item2" class="menuitem">Item 2</div>
    <div id="Item3" class="menuitem">Item 3</div>
    <div id="Item4" class="menuitem">Item 4</div>
    <div id="Item5" class="menuitem">Item 5</div>

</nav>