Flexbox中链接破坏正常布局流？求排查原因及解决办法

这不是已知Bug，是Flex布局的默认行为导致的：

当容器设置为display:flex时，它的所有直接子元素（包括文本节点）都会被当作独立的flex项目（flex item）。你的代码里，<div>的子元素是三段独立内容：

• "Here is some text. Here is a "（文本节点）
• <a href="#"> link.</a>（链接元素）
• " Here is some more text. "（文本节点）

这三个独立的flex item按Flex规则布局，就出现了两个问题：

1. 链接左侧的空格属于第一个文本节点的末尾，浏览器的空白折叠规则会合并连续空白，再加上作为独立flex item，末尾空格会被忽略，所以看起来消失了；
2. 每个flex item会单独占据布局空间，当容器宽度不足以容纳所有item在一行时，flex-wrap:wrap会触发换行，导致链接前后的文本被拆分成多行。

解决方案 #

把所有文本和链接包裹在一个内联容器（比如<span>）中，让整个段落成为Flex容器的单个flex item，这样文本流就能正常连贯排版：

修改后的代码 #

CSS（无需改动）

div {
  display:flex;
  flex-wrap:wrap;
  width:100vw;
  height:100vh;
  font-size:5vw;
  justify-content:center;
  align-items:center;
  outline:solid 1px black;
}

HTML

<div>
  <span>Here is some text.  Here is a <a href="#"> link.</a> Here is some more text.</span>
</div>

这样调整后，所有内容处于同一个文本流中，空格会正常显示，也不会出现不必要的换行，符合你的预期。

内容的提问来源于stack exchange，提问作者Josh