Is it possible to style anonymous flex items explicitly?

Question

I\'m in the early stages of grasping the basic flexbox concepts. The Using CSS Flexible Boxes article at MDN states (emphasis mine):

Each child of a f

Answer 1

Obviously not, since otherwise all text in the following example would have to be styled like the word "just":

p,
em {
  margin: 1em;
  padding: 1em;
}

p {
  border: 1px solid blue;
  display: flex;
  justify-content: space-between;
}

em {
  border: 1px solid orange;
  display: inline-flex;
}

p * {
  color: green;
  font-size: 2em;
}

<p>This is a <em>just</em> a test.</p>

Answer 2

No. Anonymous boxes cannot be directly targeted for CSS styling. CSS styles need a "hook" in the HTML to attach to. That hook is an HTML tag. Without the tag, CSS has nothing to target. This concept applies across box models, including flex and block formatting contexts.

---

More about anonymous boxes:

From the CSS spec:

9.2.2.1 Anonymous inline boxes

Any text that is directly contained inside a block container element must be treated as an anonymous inline element.

The flexbox specification provides for similar behavior.

4. Flex Items

Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item.

Answer 3

The answer is still 'no', but a little but often-needed „addition“

display: flex has a bigger effect on the children then on the styled element itself (which will be block, or whatever it's parent and the flex:-property (not value) dictates). Also the accompanying align-items: center actually affects the children.

tl;dr; anonymous inner element are affected by flex styling, behaving like an element on their own (just not by others styling attempts). Codepen

<i> + <div> hello </div><div> there </div></i>

Sass:

i
  background: #faa
  padding: 12
  padding: 0 20px
  height: 100px

  // affects innner text
  display: flex
  align-items: center

  * // affects only actual tags
    background: cyan

Answer 4

No, it isn't possible.

The W3C Candidate Recommendation says:

Note also that the anonymous item’s box is unstyleable, since there is no element to assign style rules to. Its contents will however inherit styles (such as font settings) from the flex container.