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。

Revised Demo

或者，正如@LarsW在评论中指出的那样，请设置父display: inline-block（demo）。

解释

将display: flex应用于元素时，会给出元素block-level-like properties。因此，您将块级元素放在内联元素中。

首先，这是无效的HTML：

7.5.3 Block-level and inline elements

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

^{（强调补充）}

其次，这会导致内联元素“绕过”块级别框。

9.2.1.1. Anonymous block boxes

当内联框包含流内块级别框时，内联框   （以及它在同一行框内的内联祖先）被打破了   块级框（以及任何连续的块级兄弟）   或者仅由可折叠的空白和/或流出来分开   元素），将内联框拆分为两个框（即使其中一个   边是空的），块级盒子的每一边都有一个。这条线   休息前和休息后的盒子都是匿名的   块框，块级框成为那些兄弟   匿名盒子。当这样的内联框受相对影响时   定位，任何产生的翻译也会影响块级别   包含在内联框中的框。

另见这些帖子：

display：子元素中的flex会破坏显示：父级的内联

1 个答案:

解决方案：

解释