为什么 inline-flex / inline-grid 的行为与 contenteditable 中的 inline 不一致？

Question

当我使用display: inline-flex; 或显示：inline-grid；似乎有一些额外的“空间”或某种额外的重点计算发生。我不确定到底发生了什么。当使用箭头键在 contentediatble div 中导航时，插入符号会卡住，好像它专注于不同的元素或其他东西。有谁知道原因？如果是这样，无论如何要防止这种行为（不使用 JavaScript 来处理事件）？

考虑以下两个 contenteditable div 之间的区别：

（使用箭头键导航时，插入符号会“卡在”“Hello”和“World”之间）

<div contenteditable="true"><span style="display: inline-flex;"><span>Hello</span></span><span style="display: inline-flex;">World!</span></div>

<div contenteditable="true"><span style="display: inline;"><span>Hello</span></span><span style="display: inline;">World!</span></div>

Answer 1

Flexbox 是一个一维布局系统，我们可以使用它来创建行或列轴布局。在display: flex属性中，Flex 父容器内的每个元素都会变成 Flex 项目。因此，当使用箭头键导航时，插入符号会“卡在”“Hello”和“World”之间。

CSS网格是一个二维布局系统，我们可以将行和列一起使用。它为构建更复杂、更有组织的设计系统提供了许多不同的可能性。

“CSS网格是为了布局，Flexbox是为了对齐”。更多参考Grid和flexbox，当它使用Grid和FlexBox时

flex： 该值使元素生成块级 Flex 容器框。

inline-flex： 该值使元素生成内联级弹性容器框。

grid： 该值使元素生成块级网格容器框。

inline-grid： 该值使元素生成内联级网格容器框。

您可以使用以下代码来防止使用箭头键导航时插入符号“卡在”“Hello”和“World”之间。

<div contenteditable="true"><span style="display: inline-block; margin-right: 2px">Hello</span><span style="display: inline-block;" >World!</span></div>

<div contenteditable="true"><span style="display: inline-block;">Hello</span><span style="display: inline-block;" >World!</span></div>

<div contenteditable="true" style="display: flex; justify-content: space-between;"><span>Hello</span><span>World!</span></div>