为什么 css 中的 inline-block 会产生奇怪的间距问题？答案

【问题标题】：Why does inline-block in css generate weird spacing issues?为什么 css 中的 inline-block 会产生奇怪的间距问题？
【发布时间】：2019-04-05 02:16:59
【问题描述】：

https://jsfiddle.net/dm05xe9y/

我想了解为什么 div 不能环绕 inline-block 元素（在本例中为按钮）。

html

<div class="flex">
  <div class="first">First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First Firsta</div>
  <div class="wrap">
    <button>Hello</button>
    <button>Hey</button>
  </div>
</div>

css

.flex {
  display: flex;
}
.first {
  margin-right: auto;
}
.wrap {
  background: #833;
}

编辑：您需要最大化浏览器部分的大小才能看到右侧的红色间距。

【问题讨论】：

Inline-block 像对待文本一样对待元素。如果您的元素中有空格（即使那是一个新行），它将被视为空格。
您的代码中没有内联块，也没有空格

标签： css

【解决方案1】：

留给浏览器来确定弹性框元素。

尝试改变窗口的宽度，看看它是如何变化的。

这篇文章可能对您有所帮助。 How to set a fixed width column with CSS flexbox

【讨论】：

不应该只调整大小并从红色容器中挤出空白空间吗？
嗯，它也在尝试填充浏览器窗口的宽度。你只需要给它必要的信息。在这种情况下，如果您说flex-basis:0px;，它将开始呈现零宽度并扩展以适应内容。

【解决方案2】：

在按钮之间添加<br> 或将display:block 设置为按钮

.flex {
  display: flex;
}

.first {
  margin-right: auto;
}

.wrap {
  background: #833;
}

.wrap button {
  display: block;
}

<div class="flex">
  <div class="first">First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First Firsta</div>
  <div class="wrap">
    <button>Hello</button>
    <button>Hey</button>
  </div>
</div>

【讨论】：