子元素中的 display:flex 打破了父元素的 display:inline

Question

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

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

Answer 1

解决方案：

使用display: inline-flex而不是display: flex.

修改后的演示

或者，正如 @LarsW 的评论中指出的那样，创建父级display: inline-block（demo）。

解释

当您应用于display: flex元素时，这会赋予该元素类似块级的属性。因此，您将块级元素放入内联元素中。

首先，这是无效的 HTML：

7.5.3 块级和内联元素

一般来说，块级元素可以包含内联元素和其他块级元素。通常，内联元素可能仅包含数据和其他内联元素。这种结构区别的本质是块元素创建比内联元素“更大”的结构。

^{（强调已添加）}

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

9.2.1.1. 匿名块盒

当内联框包含流内块级框时，内联框（及其在同一行框中的内联祖先）将在块级框（以及任何连续或仅由可折叠的空白和/或外流元素），将内联框分成两个框（即使任一侧为空），块级框的每一侧各一个。分隔符之前和分隔符之后的行框包含在匿名块框内，并且块级框成为这些匿名框的同级框。当这样的行内框受到相对定位的影响时，任何产生的平移也会影响行内框中包含的块级框。

另请参阅这些帖子：

• 如果一个块元素包含另一个块元素，将其更改为内联 CSS 是否错误？
• 内联元素内的块级元素