Question

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

＆＃13;

.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
}

＆＃13;

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

＆＃13;

我的问题是：为什么FlexBox可以阻止inline-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中一样，这类似于由两个由空格分隔的单词组成的短语 - 两个内联块之间的空白行为与这样的空格完全相同。¹

Flex布局和内联块绝对没有任何关系，彼此不兼容。当您在容器上声明display: flex时，其子项将成为弹性项目，这些项目永远不会显示为内联（但它们可以包含自己的内联内容）。

¹ _{这也是我认为trying to remove whitespace between inline-blocks真正解决了错误问题的原因 - 除非你做得好，否则你永远不应该首先使用inline-block并且真正了解内联布局和内联布局实际上是您所需要的。}

为什么在容器中使用flexbox可以防止内联块的额外空间

1 个答案: