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

Question

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

例如

  

Lorem ipsum dolor 坐下来，精神上的adipistur elit。 Nunc at lectus vitae libero pulvinar fringilla。 Nullam vel vestibulum orci。

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

例如

  

Lorem ipsum dolor

     坐下来，精神恍惚。 Nunc at lectus vitae libero   pulvinar fringilla。 Nullam vel 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-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中是内联级别的...

＆＃13;

＆＃13;

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

span { color: red; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

flex formatting context ...

中的所有子元素都被屏蔽

＆＃13;

＆＃13;

.flex-container1 {
    display: flex;
    flex-direction: row;
    background-color: lightgreen;
}
.flex-container2 {
    display: flex;
    flex-direction: column;
    background-color: lightgreen;
}
span { color: red; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

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

span {
    color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;