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

Question

当我使用 显示:inline-flex； 或 显示:内联网格； 似乎有一些额外的“空间”或某种额外的重点计算发生。我不确定到底发生了什么。当使用箭头键在 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 and flexbox , When it uses Grid and FlexBox
flex :
该值使元素生成块级 flex 容器框。
内联 flex :
这个值会导致一个元素生成一个内联级别的 flex 容器框。
网格:
该值使元素生成块级网格容器框。
内联网格:
该值使元素生成内联级网格容器框。
您可以使用以下代码来防止插入符号在使用箭头键导航时“卡住”在“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>