html - 为什么第二个 flexbox 容器(里面有一个 SVG)向上移动？

Question

我正在努力理解以下笔的行为(但我已经有了解决方法):https://codepen.io/nicoespeon/pen/BOamdJ

有 3 个 flexbox 容器:

1. 第一个只包含文本
2. 第二个包含一个 <svg> 元素和一些文本
3. 第三个包含一些文本和一个 <svg> 元素

我希望所有这些都保持一致。但是第二个盒子正在向上移动。

注意:我知道如果我将它们全部包装在一个 flex 容器中(例如将 display: flex | inline-flex; 设置为 body )，它们就会对齐。但我不明白 <svg> 元素是如何影响它的第二个盒子里的 flex 容器。

有什么想法吗？

Answer 1

已回答here .

这是因为 display: inline-flex; 的处理方式与任何其他内联元素一样，默认垂直对齐方式为 baseline。请注意，SVG 的底部与前面的 div 中的文本对齐。如果您将 vertical align: top 添加到 display: inline-flex 项，它们将按预期对齐。

希望对您有所帮助!我可以告诉你，当我第一次遇到这个问题时，我把它搞糊涂了。

干杯!