html - 为什么在容器中使用 flexbox 可以防止 inline-block 的额外空间

Question

当我使用 inline-block 时，我遇到了空间问题。正如许多解决方案所提出的那样here我最喜欢的解决方案是使用 FlexBox。很简单，我们只是在容器中添加display:flex。如下例:

.flexbox {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
   li {
  background: slategrey;
  display: inline-block;
  /* inline block hack for IE 6&7 */
  zoom: 1;
  *display: inline;
  padding: 4px;
  color: white
}

<ul class="flexbox">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

我的问题是:为什么FlexBox可以防止inline-block的多余空间。 (我知道为什么使用内联 block 时会存在额外的空间)。我已经阅读了一些关于 FlexBox 的文档，但是没有文档清楚地提到 flexbox 和 inline-block

之间的关系

Answer 1

flex 布局是 based on block layout .在这两种布局模式中都会忽略空白。

但是在内联布局中，内联框之间的空白很重要，如the whitespace is considered part of the inline content .如 my answer to your previous question ，这类似于由两个由空格分隔的单词组成的短语 - 两个内联 block 之间的空格与此类空格的行为完全相同。¹

Flex 布局和内联 block 完全没有任何关系，并且彼此不兼容。当您在容器上声明 display: flex 时，它的子项将成为 flex 元素，永远不能内联显示(但是它们可以包含自己的内联内容)。

---

¹ _{这也是我主张 trying to remove whitespace between inline-blocks 的原因确实解决了错误的问题 — 除非您真正了解内联布局并且内联布局确实是您所需要的，否则您一开始就不应该使用 inline-block。}