Flexbox 似乎忽略了 CSS 的特殊性答案

【问题标题】：Flexbox seems to be ignoring CSS specificityFlexbox 似乎忽略了 CSS 的特殊性
【发布时间】：2015-11-16 16:03:50
【问题描述】：

我正在尝试以与Facebook's CSS layout project 相同的方式使用 Flex-By-Default。在覆盖 display: inline-flex 元素的样式时，我遇到了一些麻烦。每this jsfiddle:

HTML，带有两个 '.test-me' div：

<body>
  <h1>TEST</h1>
  <div class="test-me">
        I'm correctly displayed as inline-flex
  </div>
  <div>
    <div class="test-me">
         'Styles' shows inline-flex, but 'Computed' shows flex
    </div>
  </div>
</body>

样式如下：

.test-me {
  display: inline-flex;
  background-color: green;
  border: 1px solid black;
  margin: 6px;
}
div, span {
  display: flex;
  /* Commenting out flex-direction makes second test-me div display correctly */
  flex-direction: column; 
  background-color: purple;
}

我有点担心这是一个浏览器错误：在 Chrome 开发者工具中，'Styles' 显示 'inline-flex' 获胜（因为它来自更具体的样式），但 'Computed' 显示 'flex'。

即使 'display: flex' 被划掉了（因为它被 'display: inline-block' 覆盖了），禁用已经划掉的样式可以解决问题。

【问题讨论】：

Computed 在 jsfiddle 上显示 inline-flex 对我来说很好。使用 Chrome Canary，所以似乎是您的 Chrome 版本中的一个错误。下一次更新（可能是两个）应该会修复它。
@garbee: Computed 显示 'display: flex' 最新的 Chrome Canary，49.0.2567.0。截图：imgur.com/EAbJJuT

标签： css flexbox css-specificity

【解决方案1】：

修改后的答案

@BoltClock，在 cmets 中，在 spec 中提供了涵盖此行为的相关部分。

Section 4. Flex Items

一个flex项目的显示值被阻塞：如果指定 display 一个元素的流入子元素生成一个 flex container 是一个内联级别的值，它计算到它的块级别等价的。

这意味着在问题中描述的场景中，flex 容器的子级被赋予一个内联级值，子级计算为其块级等效值。简而言之，带有display: inline-flex 的弹性项目变为display: flex。

原答案

我有点担心这是一个浏览器错误：在 Chrome 开发人员中工具，“样式”显示“内联灵活”获胜（因为它来自更多特定样式），但“Computed”显示“flex”。

在 Chrome、Firefox 和 Internet Explorer 11 中测试了您的代码。行为都是一样的。所以我不会说这是一个浏览器错误。

虽然您是正确的，在 Chrome（和 Firefox）中，检查器显示具有 inline-flex 的“样式”和具有 flex 的“计算”，但在 IE11 中，它在两个窗格上都显示 inline-flex，但它呈现与其他窗格一样尽管如此。

阅读spec 表明弹性项目只能是块元素。即使您将display: inline-flex 应用于div，同样的div 是具有display: flex 的更大容器的弹性项目。带有inline-flex 的弹性项目可能会作为flex formatting context 的一部分被覆盖。

虽然没有直接参考规范，但这里有另一个可能有用的答案：https://stackoverflow.com/a/27090088/3597276

【讨论】：

“阅读规范表明弹性项目只能是块元素。” inline-flex 的目的不就是内联显示元素，并通过 flex 布局其内容吗？
是的，inline-flex 应该按照specification 做一个内联显示的弹性容器。
@mikemaccana，是的，我相信你的说法是正确的。但是，如果display: inline-flex 应用于更大容器的弹性项目并应用display: flex 怎么办？这就是我在回答中提出的问题。您的问题突出了存在冲突的可能性（因为我找不到任何具体数据），并且无论具体情况如何，display: flex 都会获胜。另外，由于规范中似乎没有明确说明这一点，浏览器可能有不同的实现。
“存在冲突的可能性（因为我找不到任何具体数据），并且显示：flex 获胜，无论具体性如何”感谢您的帮助，但这确实会更好鉴于上述缺乏数据，请发表评论而不是答案。
@Michael_B: 来自section 4, “弹性项目的显示值被阻塞：如果生成弹性容器的元素的流入子项的指定显示是内联级值，它计算到它的块级等价物。”这意味着display: inline-flex flex 项变为display: flex。