我尝试以与以下相同的方式使用 Flex-By-DefaultFacebook 的 CSS 布局项目 https://github.com/facebook/css-layout。在覆盖样式时我遇到了一些麻烦display: inline-flex元素。
每这个jsfiddle https://jsfiddle.net/mnh00fzr/4/:
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 开发者工具中，“样式”显示“inline-flex”获胜（因为它来自更具体的样式），但“计算”显示“flex”。
即使“display: flex”被划掉（因为它被“display: inline-block”覆盖），禁用已经划掉的样式解决了这个问题。
修改后的答案
@BoltClock，在评论中提供了相关部分spec http://www.w3.org/TR/css-flexbox-1/覆盖这种行为。
第 4 节. 弹性
项目 http://www.w3.org/TR/css3-flexbox/#flex-items
Flex 项目的显示值被块化：如果指定display生成 Flex 的元素的流入子元素的
容器是一个内联级值，它计算到其块级
相等的。
这意味着在像问题中描述的场景中，当弹性容器的子容器被赋予内联级值时，子容器将计算其块级等效值。简而言之，弹性项目display: inline-flex变成display: flex.
原答案
我有点担心这是一个浏览器错误：在 Chrome Developer 中
工具，“样式”显示“inline-flex”获胜（因为它来自更多
特定样式），但“计算”显示“柔性”。
在 Chrome、Firefox 和 Internet Explorer 11 中测试了您的代码。行为都是相同的。所以我不会说这是浏览器错误。
尽管您是正确的，在 Chrome（和 Firefox）中，检查器显示“样式”具有inline-flex和“计算”有flex，在IE11中显示inline-flex在两个窗格上，但它的渲染效果仍然与其他窗格一样。
读一读spec http://www.w3.org/TR/css3-flexbox/#flex-containers表明弹性项目只能是块元素。即使你正在申请display: inline-flex to the div， 相同div是一个较大容器的弹性项目display: flex。弹性项目与inline-flex可能会被覆盖作为Flex 格式化上下文 http://www.w3.org/TR/css3-flexbox/#flex-formatting-context.
尽管没有直接参考规范，但这里有另一个可能有用的答案：https://stackoverflow.com/a/27090088/3597276 https://stackoverflow.com/a/27090088/3597276
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
