html - 使 成为 flex 容器的效果

Question

我已经看到，当在导航元素中使用的链接中垂直/水平居中文本时，将链接设置为 flex 容器会很有用。我没有意识到链接文本实际上可以是一个(单个) flex 元素。我可以看到链接中的 span 元素可以是 flex 元素。我希望能解释为什么链接 flex 容器的文本是 flex 元素。例如，一个 div flex 容器中的文本是否是一个单独的 flex 元素 - 它是否有用!？

我附上了一些可能有助于评论的示例。

    a {
      border: 2px red solid;
      display: flex;
      flex-direction: row;
      height: 100px;
      width: 250px;
      justify-content: center;
      align-items: center;
      margin:10px;
    }

    a span {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

    }

    a span:nth-child(1) {
      font-size: 20px;
      color: red;
    }

    a span:nth-child(2) {
      font-size: 10px;
    }

  <a href="#">Hello World!</a>
  <a href="#">Hello World! Lorem ipsum dolor sit amet consectetur adipisicing elit.</a>
  <a href="#">Hello World! Lorem ipsum</br>dolor sit amet</br>consectetur adipisicing elit.</a>
  <a href="#"><span>Hello World!</span><span>Good Bye!</span></a>
  <a href="#"><span>Hello World! Lorem ipsum dolor</span><span>sit amet consectetur adipisicing elit.</span></a>

Answer 1

CSS 使用的许多布局模型都使用 anonymous boxes 的概念:

An anonymous box is a box that is not associated with any element. Anonymous boxes are generated in certain circumstances to fix up the box tree when it requires a particular nested structure that is not provided by the boxes generated from the element tree. For example, a table cell box requires a particular type of parent box (the table row box), and will generate an anonymous table row box around itself if its parent is not a table row box. (See [CSS2] § 17.2.1.) Unlike element-generated boxes, whose styles inherit strictly through the element tree, anonymous boxes (which only exist in the box tree) inherit through their box tree parentage.

对于 flexbox，anonymous flex items are created for text runs

Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item. However, if the entire sequence of child text runs contains only white space (i.e. characters that can be affected by the white-space property) it is instead not rendered (just as if its text nodes were display:none).