Question

问题：

我有一个flex元素，里面有一些文字。到目前为止，一切都很好，但是随后有人添加了一个

mv

使用我们的CMS，因此结果如下：

<strong>TEXT</strong>

.flexelement {
  background: red;
  display: flex;
}

固定案例：

我通过用一个附加的文本包装整个文本来解决此问题，但是我想知道并寻找一种方法，即flexbox忽略<div class="flexelement">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <strong>Lorem ipsum dolor</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>元素，而将其与文本的其余部分按行排列。

有人知道吗？

Answer 1

display:flex的本质是获取该元素中的每个元素并按照指定的flex-flow显示。

例如，以下代码将包含四个元素（在<b>标记之前，<b>标记内部，<i>标记内部，<i>标记之后）< / strong>以在弹性框.flex-element

中显示
<div class="flex-element"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, ratione <b>dignissimos vel laborum animi recusandae porro reprehenderit,</b> <i>odio quod at cumque quo esse rem, reiciendis ex consectetur</i> similique dolor voluptatum. </div>

这是由于浏览器的默认容错性。

但是，在下面的示例中，它将仅考虑一个元素（在<p>标记内）显示在Flexbox中。

<div class="flex-element"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, ratione <b>dignissimos vel laborum animi recusandae porro reprehenderit,</b> <i>odio quod at cumque quo esse rem, reiciendis ex consectetur</i> similique dolor voluptatum.</p> </div>

这是因为整个元素都被 <p>标签包围。

Answer 2

这是flexbox的行为，您的子元素将自动在flex box中划分。

我的建议是为该段落添加另一个父div，如下所示：

<div class="flexelement">
  <div>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
     sed diam nonumy eirmod tempor invidunt ut labore et dolore 
     magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
     justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
     takimata sanctus est Lorem ipsum dolor sit amet. <strong>Lorem 
     ipsum dolor</strong> sit amet, consetetur sadipscing elitr, sed 
     diam nonumy eirmod tempor invidunt ut labore et dolore magna
     aliquyam erat, sed diam voluptua. At vero eos et accusam et 
     justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
     takimata sanctus est Lorem ipsum dolor sit amet.
  </div>    
</div>

flex内联元素

2 个答案: