flexbox 容器内的内容不显示内联链接答案

【问题标题】：Content inside of flexbox container not displaying links inlineflexbox 容器内的内容不显示内联链接
【发布时间】：2019-05-14 14:46:42
【问题描述】：

我对 flexbox 还很陌生，但似乎无法在这里找到答案。我有一个 <p> 标记，我已将它制作成一个 flex 容器，并且在 <p> 内我想插入一个与文本内联的链接。

要求的结果：

但是我得到的结果是这样的：

我可以获得预期结果的唯一方法是将<a> 标记的显示属性更改为“内容”，但是快速查看 CanIUse 显示的 IE 不支持它，我需要它这个任务。

我也不想重构 HTML，因为这将以所见即所得的方式呈现，而只需将类添加到 <p> 标记将是最好的方案。

我做了一个pen of the issue here，用的是scss版本，编译后的代码也贴在下面。任何帮助都会很棒。

.my-alert {
    width: 500px; 
    padding: 10px;
    border: 5px solid;
    font-weight: bold;
    display: flex;
    justify-content: start;
    align-items: center;
    font-weight: 900 !important;
}

.my-alert:before {
    font-family: 'Font Awesome 5 Free';
    font-size: 40px;
    display: flex;
    align-items: center;
    padding-right: 20px;
    font-weight: 900 !important;
}

.my-alert-success {
    color: green;
    border-color: green;
}

.my-alert-success:before {
  content: '\f058'
}

&lt;p class="my-alert my-alert-success"&gt;Quam diu etiam furor iste tuus nos eludet? Excepteur sint obcaecat cupiditat non proident culpa.&lt;a href="/"&gt;Here is my link.&lt;/a&gt; And here is more content.&lt;/p&gt;

【问题讨论】：

永远不要使用 flexbox 作为文本的容器......这就是说，你想在最后实现什么？对齐？
原因是这样左边的图标会垂直对齐而不管盒子的高度（因为文本长度可以很）
检查这个：stackoverflow.com/a/34820741/8620333 ...这是你需要的，只需将vertical-align:top替换为中间
这看起来很理想，谢谢。除了我的问题不需要 flexbox 作为解决方案的明显示例之外，当您说“永远不要将 flexbox 用作文本容器”时，还有更具体的原因吗？仅供参考。
原因正是您面临的问题。使用带有文本的 flexbox 将使您的文本表现得像 flex 项（类似于块级别），并且您将破坏文本的正常流动（内联元素）。 Flexbox 用于布局考虑应该分开的不同块，而不是简单的文本。Flexbox 很好，但它不应该是所有事情的自动解决方案

标签： css sass flexbox

【解决方案1】：

这里不要使用display:flex，因为它会将其容器内的所有元素都视为“块”。

.my-alert {
    width: 500px; 
    padding: 10px;
    border: 5px solid;
    font-weight: bold;
    /*display: flex; */
    padding-left:40px;
    justify-content: start;
    align-items: center;
    font-weight: 900 !important;
    float:left;
    position: relative;
    &:before {
        font-family: 'Font Awesome 5 Free';
        font-size: 40px;
        display: flex;
        align-items: center;
        padding-right: 20px;
        font-weight: 900 !important;
      position:absolute; 
      left:8px; 
      top:50%;
      transform:translateY(-50%);
    }
}

.my-alert-success {
    color: green;
    border-color: green;
    &:before {
        content: '\f058';
    }
}

【讨论】：