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

Question

我有使用 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 是黄色。

Answer 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>