Html 为什么'；内联flex/内联网格的行为是否与contenteditable中的内联一致？

当我使用显示时：inline flex或显示：内联网格似乎增加了一些“空间”或进行了某种额外的聚焦计算。我不确定到底发生了什么。当使用箭头键在ContentEdiaTable div中导航时，插入符号会被卡住，好像它在关注不同的元素或其他东西。有人知道原因吗？如果是这样的话，如何防止这种行为（不使用JavaScript来处理事件）

考虑以下两个contenteditable div之间的差异：

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

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

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

“CSS网格用于布局，Flexbox用于对齐”。更多参考资料

flex:
该值使元素生成块级flex容器框

内联弹性体：
该值使元素生成内联级别的flex容器框

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

内联网格：
该值使元素生成内联级别的网格容器框

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


HelloWorld！
地狱世界！
地狱世界这些是
flex、内联flex和
之间空格的定义

因此，使用flex和space-between
可以在元素之间留出空间

显示-

flex：将元素显示为块级flex容器

内联flex：将元素显示为内联级别的flex容器

调整内容-

项目之间的间距与行之间的间距一起定位
答复:

选择1



地狱世界！
地狱世界！
地狱世界！
使用“display:inline block；”并不能解决这个问题，因为我需要使用“inline flex”或“inline grid”。我还想从技术上解释为什么flex项会因位置而挂起。发生了什么计算？这仍然不涉及“内联flex”项被“捕获”的原因。为什么会被抓住？进行哪种浏览器计算？这些解决方案与我的问题完全相同。我不想在元素之间设置间隙。“inline flex”的行为方式应与“inline”相同。有什么解决办法吗？