子元素中的display：flex破坏了父元素的display：inline

jobmo 发表于 Dev

工作

假设我有三个内联元素，它们包含跨度，某种类型的

<div class="my-inline-element">
    <span >Item1</span>
</div>

<div class="my-inline-element">
    <span >Item2</span>
</div>  

<div class="my-inline-element">
    <span >Item3</span>
</div>

.my-inline-element风格有display:inline;：

.my-inline-element{
  border:2px solid red;
  display:inline;
  margin-right:5px;
}

一切正常（https://jsfiddle.net/dbbd0zLa/1/）

当我想在内部设置跨度时会发生问题display:flex;...

.my-inline-element span {
  display: flex;
}

为什么会中断父（my-inline-element）内联显示？（https://jsfiddle.net/9qdphh61/1/）

迈克尔·本杰明（Michael Benjamin）

解决方案：

使用display: inline-flex代替display: flex。

修改后的演示

或者，如@LarsW的注释中所指出的那样，将其设为父级display: inline-block（demo）。

解释

当您应用于display: flex元素时，这将为元素提供类似于块级的属性。因此，您要将一个块级元素放在一个内联元素中。

首先，这是无效的HTML：

7.5.3块级和内联元素

通常，块级元素可以包含内联元素和其他块级元素。通常，内联元素可以仅包含数据和其他内联元素。这种结构上的区别固有的思想是，块元素比内联元素创建“更大”的结构。

^（强调）

其次，这会使内联元素“突破”块级框。

9.2.1.1。匿名方块盒

当一个内联框包含一个流入的块级框时，该内联框（及其在同一行框内的行内祖先）在该块级框（以及任何连续的或仅由以下分隔的块级同级）周围被打断。可折叠的空白和/或流出元素），将嵌入式框拆分为两个框（即使任一侧为空），在块级框的每一侧。分隔符之前和之后的行框都包含在匿名块框中，而块级框成为这些匿名框的兄弟。当此类内联框受到相对位置的影响时，任何产生的平移也会影响内联框中包含的块级框。

另请参阅以下帖子：

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。