flex 容器内的粗体文本未内联显示

Posted 2023-03-04

【中文标题】flex 容器内的粗体文本未内联显示

【英文标题】：Bold text inside a flex container not appearing inline

【发布时间】：2017-01-08 18:08:40

【问题描述】：

我有使用 flex 的 div 容器。我的 flex 子容器中有一个大胆的衰老。

例子

Lorem ipsum dolor 坐在一起，consectetur adipiscing elit。 Nunc at lectus vitae libero pulvinar fringilla。 Nullam vestibulum orci。

但是，当我创建我的 flex 容器时，它并没有将粗体文本内联。它在常规文本和粗体文本之间创建了一个块。

例子

Lorem ipsum dolor

sit amet，consectetur adipiscing elit。 Nunc at lectus vitae libero 枕状边缘。 Nullam vestibulum orci。

我的 flex 容器设置如下：

.flexparent  display: flex; flex-direction: row; justifty-content: center; flex-wrap: wrap-reverse 
.flexchild1  display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-contetn: center; width: 65%; margin-right: 4%;
.flexchild2  display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-contetn: center; width: 35%;

我的理想解决方案是这样的，.flexchild1 是绿色，.flexchild2 是黄色。

【问题讨论】：

如何使“Lorem ipsum dolor”加粗

【参考方案1】：

如果您要使用 flex 容器，请记住，所有子元素都将成为 flex 项并垂直或水平堆叠，具体取决于flex-direction。

所以，如果我们考虑这段代码：

<div class="flex-container"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>

尽管 <b>、<span> 和 <i> 元素在 block formatting content 中是内联级别的...

.flex-container 
    display: block;
    flex-direction: row;
    background-color: lightgreen;


span  color: red; 

<div class="flex-container"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>

所有子元素在flex formatting context...中被阻止...

.flex-container1 
    display: flex;
    flex-direction: row;
    background-color: lightgreen;

.flex-container2 
    display: flex;
    flex-direction: column;
    background-color: lightgreen;

span  color: red; 

<div class="flex-container1"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>

<hr>

<div class="flex-container2"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>

您可能想要做的是将文本包装在 flex 容器内自己的块级容器中。

.flex-container1 
    display: flex;
    flex-direction: row;
    background-color: lightgreen;


.flex-container2 
    display: flex;
    flex-direction: column;
    background-color: lightgreen;


span 
    color: red;

<div class="flex-container1">
    <div>
        <b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i>
    </div>
</div>

<hr>

<div class="flex-container2">
    <div>
        <b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i>
    </div>
</div>

【讨论】：

谢谢你，Micheal 这帮助了我分配。当我研究 flex element 时，我会听取你对未来的建议。非常感谢您的帮助！