Flexbox：文本项“font-size：0”并占用空间

div { display: flex
    ; font-size: 0
    ; justify-content: space-between
    }

div > a { font-size: 10pt }

<div>
  Banana
  <a>Meat grinder</a>
  <a>Phone</a>
</div>

Live

Why does the Flexbox text item take up space when its font-size is set to 0? Is there a way around it, e.g. selector for the text items? Assume I can't access the HTML.

为什么Flexbox文本项在font-size设置为0时会占用空间?有没有办法绕过它,例如文本项的选择器?假设我无法访问HTML。

1 个解决方案

#1

The spec says:

规范说:

4. Flex Items

4. Flex项目

Loosely speaking, the flex items of a flex container are boxes representing its in-flow contents.

简而言之,flex容器的flex项是表示其流入内容的框。

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. However, an anonymous flex item that contains only white space (i.e. characters that can be affected by the white-space property) is not rendered, as if it were display:none.

Flex容器的每个in-flow子项都变为flex项,并且直接包含在flex容器内的每个连续文本行都包含在匿名flex项中。但是,不会呈现仅包含空格(即可受白色空间属性影响的字符)的匿名弹性项目,就好像它是display:none一样。

Therefore, this behavior you observe is caused because your text is wrapped in an anonymous flex item, even if your text is not displayed because of font-size: 0.

因此,您观察到的这种行为是由于您的文本包装在匿名弹性项目中引起的,即使由于font-size:0而未显示您的文本也是如此。

#1