html - Flexbox:文本项 `font-size: 0' 并占用空间

Question

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

当 font-size 设置为 0 时，为什么 Flexbox 文本项会占用空间？有没有办法解决它，例如文本项的选择器？假设我无法访问 HTML。

Answer 1

规范说:

4. Flex Items

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

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 元素中，即使您的文本因为 font-size: 0 而没有显示也是如此。