我正在尝试以与 Facebook's CSS layout project 相同的方式使用 Flex-By-Default| .在覆盖 display: inline-flex 元素的样式时，我遇到了一些麻烦。
每this jsfiddle :
带有两个“.test-me”div 的 HTML:
<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”覆盖了)，禁用已经被划掉的样式可以解决这个问题。
最佳答案
修改后的答案
@BoltClock，在评论中提供了 spec 中的相关部分涵盖此行为。
The display value of a flex item is blockified: if the specified
displayof an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.
这意味着在问题中描述的场景中， flex 容器的子项被赋予一个内联级值，该子级计算到它的 block 级等价物。简而言之，带有 display: inline-flex 的 flex item 变成了 display: flex。
原始答案
I am am slightly concerned this is a browser bug: in Chrome Developer Tools, 'Styles' shows 'inline-flex' winning (as it's from the more specific styling), but 'Computed' shows 'flex'.
在 Chrome、Firefox 和 Internet Explorer 11 中测试了您的代码。行为完全相同。所以我不会说这是浏览器错误。
尽管您是正确的，在 Chrome(和 Firefox)中，检查器显示具有 inline-flex 的“Styles”和具有 flex 的“Computed”，但在 IE11 中它显示 inline-flex 在两个 Pane 上，但它仍然像其他 Pane 一样呈现。
阅读 spec建议 flex 元素只能是 block 元素。即使您将 display: inline-flex 应用于 div，相同的 div 也是一个更大容器的 flex 元素，其中包含 显示: flex 。具有 inline-flex 的 flex 元素可能作为 flex formatting context 的一部分被覆盖.
虽然没有直接引用规范，但这里有另一个可能有用的答案:https://stackoverflow.com/a/27090088/3597276
关于css - Flexbox 似乎忽略了 CSS 特异性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33739617/