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

Question

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

例子

Lorem ipsum dolor坐 amet，consectetur adipiscing 精英。Nunc 在 lectus vitae libero pulvinar fringilla。Nullam vel 前庭 orci。

但是，当我创建我的 flex 容器时，它不会使粗体文本内联。它在常规文本和粗体文本之间创建一个块。

例子

Lorem ipsum dolor

坐在 amet，consectetur adipiscing 精英。Nunc 在 lectus vitae libero pulvinar fringilla。Nullam vel 前庭 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>元素是行内的块格式化内容...

.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 格式上下文中被阻止...

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