Flexbox似乎忽略了CSS的特性 [英] Flexbox seems to be ignoring CSS specificity
问题描述
我试图以与
有两个'.test-me'div的HTML：
< body>
< h1> TEST< / h1>
< div class =test-me>
我正确显示为inline-flex
< / div>
< div>
< div class =test-me>
'Styles'显示inline-flex，但Computed显示flex
< / div>
< / div>
< / body>
以下是样式：
.test-me {
display：inline-flex;
background-color：green;
border：1px solid black;
margin：6px;
}
div，span {
display：flex;
/ *注释掉flex-direction使第二个test-me div显示正确* /
flex-direction：column;
background-color：purple;
}
我稍微担心这是一个浏览器错误： style显示inline-flex获胜（因为它来自更具体的样式），但Computed显示为flex。
'（因为它被'display：inline-block'覆盖），禁用已划掉的样式可修复此问题。
修订回答
@BoltClock在注释中提供了 spec 涵盖此行为。
< blockquote>
flex项目的显示值被阻止：如果指定的
显示生成flex
容器的元素的流中的孩子是一个内联级别的值，它计算到它的块级别
等价。
这意味着在一个像问题中描述的场景中，一个flex容器的子节点被赋予一个行内层次的值，子节点计算其块级等效。简而言之， display：inline-flex 的flex项目变为 display：flex 。
原始回答
我稍微担心这是一个浏览器错误：在Chrome开发人员
工具，样式显示inline-flex获胜（因为它是从更多的
特定的样式），但计算 'flex'。
在Chrome，Firefox和Internet Explorer 11中测试您的代码。行为是一样的。
虽然你是正确的在Chrome（和Firefox），检查器显示样式有 inline-flex 和Computed有 flex ，在IE11中显示 inline-flex
阅读 spec 表明flex项目只能是块元素。即使您正在将 display：inline-flex 应用于 div ，同样的 div 是具有 display：flex 的较大容器的flex项。具有 inline-flex 的flex项目可能会被覆盖为 flex格式化上下文。
虽然没有直接引用规范，有帮助： http://stackoverflow.com/a/27090088/3597276
I am attempting to use Flex-By-Default in the same manner as Facebook's CSS layout project. I am having some trouble when it comes to overriding the styles for display: inline-flex elements.
Per this jsfiddle:
The HTML, with two '.test-me' divs:
<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>
Here is the styling:
.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;
}
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'.
Even though 'display: flex' is crossed out (since it's overridden by 'display: inline-block'), disabling the already crossed-out style fixes the issue.
Revised Answer
@BoltClock, in the comments, provides the relevant section in the spec covering this behavior.
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.
This means that in a scenario like the one described in the question, where a child of a flex container is given an inline-level value, the child computes to its block-level equivalent. In a nutshell, the flex item with display: inline-flex becomes display: flex.
Original Answer
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'.
Tested your code in Chrome, Firefox and Internet Explorer 11. The behavior is all the same. So I wouldn't say this is a browser bug.
Although you are correct that in Chrome (and Firefox) the inspector shows 'Styles' having inline-flex and 'Computed' having flex, in IE11 it shows inline-flex on both panes, but it renders like the others nonetheless.
A reading of the spec suggests that flex items can only be block elements. Even though you're applying display: inline-flex to the div, the same div is a flex item of a larger container with display: flex. The flex item with inline-flex is possibly being overridden as part of the flex formatting context.
Although there is no direct reference to the spec, here's another answer that may be helpful: http://stackoverflow.com/a/27090088/3597276
这篇关于Flexbox似乎忽略了CSS的特性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
