flexbox - Flexbox在``标签之后禁用html中断标签？

Question

我尝试<br />在 fontello 图标后插入一个标签来换行，发现当 div 的样式为“display:flex”时是不可能的。添加空白也被禁用。可以在某个字符后添加新行，但新行从<i>标记下方开始。为什么以及如何解决这个问题？PS：我注意到在 Chrome 中的情况比在 Firefox 中要好，但新行仍然从<i>标签下开始。例子：

.with_flexbox{
display:flex;
color:purple;
}

<div class="with_flexbox red">
With flexbox I can't use &lt;br /&gt; tag right after <i>&lt;i&gt;</i><br /> tag
</div>
<div class="without_flexbox">
Without flexbox break after <i>&lt;i&gt;</i><br />
tag works fine.
</div>
<div class="with_flexbox">
White space is also disabled right after <i>&lt;i&gt;</i>    tag. <br />And why this new line starts beneath &lt;i&gt; tag?
</div>

Answer 1

在您的弹性容器的第三个示例中，您的弹性容器的内容按<i>节点拆分为 3 个弹性项目，您将获得 1 个项目，其中包括： White space is also disabled right after、第二个项目<i><i></i>和第三个项目tag. <br> And why this new line starts beneath <i> tag?。一切看起来都很好，你会得到 3 个水平显示的节点，单词标签后有一个换行符，就像你写的一样。

将文本片段包装到单独的标签中不仅在语义上有意义，而且还有助于您维护代码。

如果你想坚持使用 flexbox，你应该单独命名每个节点并使用flex-direction: column而不是 br 标签，或者你可以为两个元素设置 flex base 并使用 flex-wrap。下面附上示例片段。

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  outline: 1px solid red;
}

.item__icon {
    outline: 1px solid blue;
}

.item__intro {
  outline: 1px solid green;
}

.item__description{
  outline: 1px solid yellow;
}

<figure class="item">
 <p class="item__intro">White space is also disabled right after</p>   
 <i class="item__icon">&lt;i&gt;</i>
 <figcaption class="item__description">tag. <br />And why this new line starts beneath &lt;i&gt; tag?</figcaption>
</div>