Flex容器中a标签布局异常：为何无法与文本内联显示？

当你给.test容器设置display: flex后，容器内的所有直接内容——包括普通文本和<a>标签——都会被视为独立的flex布局项。flex默认会沿水平方向排列这些项，但每个项都是独立的“块”，自然没法像普通文本流那样和超链接内联衔接，最终导致布局异常。

有两种简单的修复方式：

1. 用容器包裹全部内容 #

把文本和超链接统一放进一个<span>（或<p>）中，让整个内容成为单个flex布局项，内部的文本和超链接就能正常内联显示：

<div class="test">
  <span>No results found. Looks like you may need some expert advice from our Customer Care team! Please <a href="https://ggogle.com">contact us</a> or check your selections.</span>
</div>

2. 替换display属性（若无需flex的多元素布局能力） #

要是你只是需要文本垂直居中，不需要flex的多项目布局功能，可以把display: flex改成display: block，再通过调整行高实现垂直居中：

.test {
    padding: 25px;
    display: block;
    height: 100%;
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0.7;
    /* 减去上下padding总和，适配容器高度实现垂直居中 */
    line-height: calc(100% - 50px);
}

内容的提问来源于stack exchange，提问作者Faye D.