切勿将文本容器设为 flexbox 容器

^{在css-tip.com上了解更多 CSS 技巧}

Flexbox 很棒。可惜的是，很多开发者用错了地方。更确切地说，他们总是自动地在任何地方使用它，即使它不应该被使用。

让我们来看以下例子

<p class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper augue ac leo tincidunt euismod.</p>

.box {
  width: 300px;
  height: 300px;
}

现在，你需要完成一个常见的任务：将盒子的内容水平和垂直居中。嗯，这是一个很简单的任务：

让我们使用 flexbox！

.box {
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

完成了，内容居中，结果看起来很完美，不是吗？

不，你做的是错事

为了理解为什么它是错误的，让我们通过在内容中引入链接来稍微修改我们的内容

<p class="box">Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Quisque semper augue ac leo tincidunt euismod.</p>

现在运行代码并查看结果：

别担心，你看到的不是 bug，而是 flexbox 算法的逻辑结果（虽然不直观，但合乎逻辑）。为了理解这种行为，我们来看一下规范：

粗略地说，弹性容器的弹性项目是表示其流入内容的盒子。

弹性容器的每个流入子项都成为一个弹性项目，并且每个连续的子文本序列都包裹在一个匿名块容器弹性项目中。

在我们的第一个案例中，我们只有一个 文本序列，这个文本序列会被包裹在一个匿名块中，从而成为一个弹性项目。由于整个文本都被包裹在一起，所以在这种情况下不会出现奇怪的结果。

第二种情况则有所不同。我们有一个流内子元素（我们的链接<a>），在它的每一侧都有一个文本序列，因此最终有 3 个块：链接 + 2 个用于文本的匿名块

现在事情变得更加清晰了。我们用 flexbox 按照行方向（默认方向）完美地居中了 3 个盒子，但结果根本不是我们想要的。

这种情况的修复很简单：我们只需在文本周围添加一个额外的包装器

<p class="box"><span>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Quisque semper augue ac leo tincidunt euismod.</span></p>

或者我们考虑一个外部容器。

<div class="box"><p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Quisque semper augue ac leo tincidunt euismod.</p></div>

这篇文章的目的并非修复这种特殊情况，而是想强调一些不当使用 Flexbox 可能导致的不良后果。以上只是你可能遇到的众多问题中的一个简单示例，修复起来可能并非易事。

真正的问题在于没有找到解决办法。真正的问题是发现问题，而这些问题可能只发生在某些特定内容上（比如上面添加链接时）。你可能写了很多 CSS，但直到稍微修改内容后才注意到这个问题，这时你才需要重写大部分代码。

这就是说你应该永远记住这条黄金法则：

Flex[box] 用于盒子而不是文本，所以永远不要将文本容器设为 flexbox 容器。

或者