为什么 inline-flex / inline-grid 的行为与 contenteditable 中的 inline 不一致？
[英]Why doesn't inline-flex / inline-grid behave consistently as with inline in contenteditable?
问题描述
When I use display: inline-flex;
当我使用display: inline-flex; or display: inline-grid;或显示：inline-grid； there seems to be some added "spaces" or some kind of extra focused calculations take place.似乎有一些额外的“空间”或某种额外的重点计算发生。 I'm not sure exactly what's happening.我不确定到底发生了什么。 When using the arrow keys to navigate through a contentediatble div, the caret gets stuck as if it is focusing on a different element or something.当使用箭头键在 contentediatble div 中导航时，插入符号会卡住，好像它专注于不同的元素或其他东西。 Does anyone know the reason why?有谁知道原因？ And if so, anyways to prevent this behavior (not using JavaScript to handle the events)?如果是这样，无论如何要防止这种行为（不使用 JavaScript 来处理事件）？
Consider the difference between the two following contenteditable divs:考虑以下两个 contenteditable div 之间的区别：
(The caret gets "stuck" in between "Hello" and "World" when navigating with arrow keys) （使用箭头键导航时，插入符号会“卡在”“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>
2 个解决方案
解决方案1
1 2020-09-22 14:45:05
Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout. Flexbox 是一个一维布局系统，我们可以使用它来创建行或列轴布局。 In display: flex property, every element that you have inside that flex parent container turns into a flex item.在display: flex属性中，您在该 flex 父容器中拥有的每个元素都变成了一个 flex 项目。 So, the caret gets "stuck" in-between "Hello" and "World" when navigating with arrow keys.因此，当使用箭头键导航时，插入符号会“卡在”“Hello”和“World”之间。
CSS grid is a two-dimensional layout system, we can work with rows and columns together. CSS 网格是一个二维布局系统，我们可以将行和列一起工作。 It opens a lot of different possibilities to build more complex and organized design systems.它为构建更复杂和更有组织的设计系统开辟了许多不同的可能性。
"CSS grid is for layout, Flexbox is for alignment" . “CSS 网格用于布局，Flexbox 用于对齐” 。 More Reference Grid and flexbox , When it uses Grid and FlexBox更多参考Grid 和 flexbox ，当它使用 Grid 和 FlexBox 时
flex: This value causes an element to generate a block-level flex container box. flex：该值使元素生成块级 flex 容器框。
inline-flex: This value causes an element to generate an inline-level flex container box. inline-flex：这个值会导致一个元素生成一个内联级别的 flex 容器框。
grid: This value causes an element to generate a block-level grid container box. grid：该值使元素生成块级网格容器框。
inline-grid: This value causes an element to generate an inline-level grid container box. inline-grid：该值使元素生成内联级网格容器框。
You can use the below codes to prevent The caret gets "stuck" in-between "Hello" and "World" when navigating with arrow keys) .您可以使用以下代码来防止插入符号在使用箭头键导航时“卡住”在“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>
解决方案2
0 2020-09-23 14:43:50
These are definitions of flex,inline-flex,space-between .这些是flex,inline-flex,space-between 。
so using flex and space-between you can give space between elements.所以使用flex and space-between你可以在元素flex and space-between留出空间。
display -展示 -
flex : Displays an element as a block-level flex container flex : 将元素显示为块级 flex 容器
inline-flex : Displays an element as an inline-level flex container inline-flex : 将元素显示为内联级 flex 容器
justify-content -证明内容 -
space-between Items are positioned with space between the lines ANSWERS: space-between 项目放置在行之间的空间 答案：
OPTION 1选项1
<!DOCTYPE html> <html> <body> <div contenteditable="true" style="background-color: cornflowerblue;"><span style="display: inline-flex;"><span>Hello</span></span><span style="display: inline-flex;color: white;">World!</span></div> <div contenteditable="true" style="display: flex ;justify-content: space-between;background-color: coral;"><span style="display: inline;background-color: cyan;"><span style="color: white;">Hello</span></span><span style="display: inline;">World!</span></div> <div contenteditable="true" style="display: inline-flex;background-color: coral;"> <span style="display: inline;background-color: cyan;"><span style="color: white;">Hello</span></span><span style="display: inline;">World!</span></div> </body> </html>
you can also use justify-content: space-between to give space between Hello World!您还可以使用justify-content: space-between在Hello World!之间Hello World!空间Hello World!
OPTION 2选项 2
<!DOCTYPE html> <html> <body> <div contenteditable="true" style="background-color: cornflowerblue;" ><span style="display: inline-flex;"><span>Hello</span></span><span style="display: inline-flex;color: white;">World!</span></div> <div contenteditable="true" style="display: flex;justify-content: space-between;background-color: coral;"><span style="display: inline;background-color: cyan;"><span style="color: white;">Hello</span></span><span style="display: inline;">World!</span></div> <div contenteditable="true" style="justify-content: space-between;background-color: coral;"><span style="display: inline;background-color: cyan;"><span style="color: white;">Hello</span></span><span style="display: inline;">World!</span></div> </body> </html>
This is same as OPTION 1这与选项 1 相同
if you follow first option you should put both display: flex ;justify-content: space-between;如果您遵循第一个选项，您应该同时使用display: flex ;justify-content: space-between; but if you follow second option then you should put only justify-content: space-between;但如果你遵循第二个选项，那么你应该只放置justify-content: space-between; and display: flex ;并display: flex ; is optional.是可选的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.