是否可以显式设置匿名弹性项目？ [英] Is it possible to style anonymous flex items explicitly?

问题描述

我正处于掌握Flexbox基本概念的初期阶段。 MDN上的使用CSS灵活框文章指出重点是我的）：

lockquote

flex容器的每个子元素都变成了一个flex元素。 直接包含在flex容器中的文本被包装在一个匿名的flex项目中。

这意味着以下标记自动提供三个项目来玩：

p，em {保证金：1em; padding：1em;} p {border：1px solid blue;显示：flex;证明内容：空间之间; } em {border：1px solid orange; display：inline-flex;}

< p>是< em>只是< / em> < / code>

然而，仍然不确定Flexbox模型本身之外的这些匿名项目的可能性（如果有的话）。这是真棒不需要包装这是一个和一个测试在假的< span> 标签的布局，但是，有没有办法将常规样式他们？一个伪元素或类似的东西？例如，我可以为段落的三个部分分别设置不同的颜色吗？

解决方案

匿名框不能直接针对CSS样式。 CSS样式需要在HTML中附加一个钩子。该钩子是一个HTML标记。没有标签，CSS没有任何目标。这个概念适用于各种框模型，包括 flex 和 block 格式上下文。

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 flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.

That means that the following mark-up automatically provides three items to play with:

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>This is a <em>just</em> a test.</p>

However, I'm still unsure about the possibilities of these anonymous items outside flexbox model itself (if any). It's awesome not to need to wrap "This is a" and "a test" in bogus <span> tags for layout but, is there a way to apply regular styles to them? A pseudo-element or something similar? Could I, for instance, set a different colour to each one of the three parts the paragraph is divided into?

解决方案

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.

这篇关于是否可以显式设置匿名弹性项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！