html - 是什么导致了 flex 元素和 inline-block 元素的宽度差异？

Question

看这个 fiddle :

https://jsfiddle.net/9hnj0b8v/3/

两个元素的唯一区别:

.label1
{
  display: inline-block;
}

.label2
{
  display: flex;
}

所以这两个标签除了一个设置为 inline-block 而一个设置为 flex 之外是相同的。为什么它们的宽度不同？为什么一个超出其容器而另一个没有？

Answer 1

您正在使用 display: inline-block 设置 span 元素的样式。默认情况下， block 级元素是其父容器宽度的 100%。当您使用 white-space: nowrap 强制输入和跨度位于同一行时，这会强制跨度超出父容器的边界。

Why do they have a different width? Why is one exceeding its container and the other does not?

使用 display: flex 允许子元素缩小以适应可用空间，因此 span 元素以其父元素的 100% 宽度开始，然后缩小以填充可用空间。