Flexbox seems to be ignoring CSS specificity

问题

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.

回答1:

Revised Answer

@BoltClock, in the comments, provides the relevant section in the spec covering this behavior.

Section 4. Flex Items

The display value of a flex item is blockified: if the specified display of 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: https://stackoverflow.com/a/27090088/3597276

来源：https://stackoverflow.com/questions/33739617/flexbox-seems-to-be-ignoring-css-specificity

标签

css

css3

flexbox

css-specificity