Question

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

HTML，有两个＆＃39; .test-me＆＃39;的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开发者工具中，＆＃39;样式＆＃39;显示＆＃39; inline-flex＆＃39;获胜（因为它来自更具体的造型），但是＆＃39; Computed＆＃39;显示＆＃39; flex＆＃39;。

即使＆＃39;显示：flex＆＃39;被删除（因为它被显示：内联块＆＃39;覆盖），禁用已经划掉的样式修复了问题。

Answer 1

修订答案

@BoltClock在评论中提供spec中涉及此行为的相关部分。

Section 4. Flex Items

Flex项的显示值被阻止：如果指定   display生成flex的元素的in-flow子节点   container是一个内联级别的值，它计算到它的块级别   等效。

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

原始答案

我有点担心这是一个浏览器错误：在Chrome Developer中工具，'样式'显示'inline-flex'获胜（因为它来自更多特定样式），但“计算”显示'flex'。

在Chrome，Firefox和Internet Explorer 11中测试您的代码。行为完全相同。所以我不会说这是一个浏览器错误。

虽然你是正确的，但在Chrome（和Firefox）中，检查员会显示“样式”，其中inline-flex和“已计算”为flex，在IE11中，它会在两个窗格中显示inline-flex，但它仍然像其他人一样呈现。

读取spec表明弹性项目只能是块元素。即使您将display: inline-flex应用于div，相同的div也是display: flex更大容器的弹性项目。 inline-flex的{{1}}可能会覆盖包含OrderDetail::checkProductStock的弹性项目。

虽然没有直接参考规范，但这是另一个可能有用的答案：flex formatting context

Flexbox似乎忽略了CSS特异性

1 个答案: