垂直对齐的内联flexbox的宽度随子代数的增加而增加

Question

我想使用某种“块”类比形象化HTML中类似源代码的结构。但是无论出于什么原因，我在Flexbox上遇到一些奇怪的尺寸问题。以下代码段显示了一个程序的可视化效果，该程序将“正常”打印如下：

while(true) {
  goForward();
  goForward();
  goForward();
  goForward();
  goForward();
}

while的外框显示为inline-flex，以占用尽可能少的水平空间。但是，正如您在屏幕截图中看到的那样（或者您可以自己运行代码段），浪费了很多空间：

我期望的结果如下：

但是，如果单击goForward()块（用display: none标记），则育儿块的宽度会突然缩小。据我所知，它的缩小程度相当于现在隐藏的块的宽度。

goForward()块之间的“换行符”是使用height: 0但使用width: 100%元素实现的。我还尝试了在没有空元素和break-after: always的情况下进行中断，但这导致了外部flexbox的确切行为。我已经在Firefox和Chrome的最新版本中观察到了此行为。

为什么最外面的inline-flex元素的宽度（垂直）随垂直显示的项目数而改变？在我基本上想要具有任意“换行符”的块布局的情况下，我该如何“正确”实现这种布局？

// Hide blocks on click to demonstrate width changes
Array.from(document.querySelectorAll(".forward")).forEach(
  elem => elem.addEventListener('click', () => elem.classList.add("hide"))
);

.code-block {
  border: 2px solid blue;
  border-radius: 5px;
  padding: 5px;
  display: inline-flex;
  flex-flow: row wrap;
  align-items: baseline;
}

.line-break {
  width: 100%;
}

.forward {
  cursor: pointer;
}

.hide {
  display: none;
}

<div class="code-block">
  <div class="terminal">while(</div>
  <div class="code-block">true</div>
  <div class="terminal">)</div>
  <div class="line-break"></div>
  <div class="code-block forward">
    <div class="terminal">goForward()</div>
  </div>
  <div class="line-break"></div>
  <div class="code-block forward">
    <div class="terminal">goForward()</div>
  </div>
  <div class="line-break"></div>
  <div class="code-block forward">
    <div class="terminal">goForward()</div>
  </div>
  <div class="line-break"></div>
  <div class="code-block forward">
    <div class="terminal">goForward()</div>
  </div>
  <div class="line-break"></div>
  <div class="code-block forward">
    <div class="terminal">goForward()</div>
  </div>
</div>

Answer 1

尝试使用flex-flow: row wrap;而不是flex-direction: column;。这样可使每个项目垂直移动。然后，将您想要的所有内容包装在.code-block内的单个“行”中，以使每一行的内容保持在一起。所以，

<div class="code-block">
  <div class="line-break">
    <div class="terminal">while(</div>
    <div class="code-block">true</div>
    <div class="terminal">)</div>
  </div>

...以此类推。

（您也不需要align-items: baseline;。）