css - flex 容器内的 DIV 向下推整行

Question

我正在使用指令开发一个 angular/js 应用程序，这个特定的 flex 容器使用可能包含一个或多个元素的 div(指令)。当一个指令包含 3 个 flexbox 元素时，如果它不能完全适合该指令中的所有元素，它会将整行向下推，而不是说将一个留在第一行并将其余的放在第二行。相反，它会在顶部留下一个空白空间，并将所有 3 个推到第二行。在这种情况下使用指令的原因是为了重用并将通用功能组合在一起。

为简化起见，这演示了我在使用 div 时遇到的问题。查看示例，如果您调整窗口大小，您会发现一旦没有足够的空间容纳第 6 个气泡，该 div 中的所有 3 个气泡都会被推到第二行。 example on codepen

dl,
dt,
dd {
  /* resetting definition list styling */
  margin: 0;
  padding: 0;
}

.bubble {
  display: block;
  border-radius: 1rem;
  background: rgb(52, 58, 64);
  color: rgb(255, 255, 255);
  text-align: center;
  font-weight: 600;
  padding: 1rem;
  width: 10rem;
  height: 10rem;
}

.flex-container {
  display: inline-flex;
  flex-wrap: wrap;
}

.flex-container div {
  display: inline-flex;
}

<div class="flex-container">
  <div>
    <dl class="bubble">1</dl>
  </div>
  <div>
    <dl class="bubble">2</dl>
  </div>
  <div>
    <dl class="bubble">3</dl>
  </div>
  <div>
    <dl class="bubble">4</dl>
    <dl class="bubble">5</dl>
    <dl class="bubble">6</dl>
  </div>
</div>

我是否有可能在第 3 个气泡之后让包含 3 个元素的 div 开始，并只包装那些不适合第二行的元素？

Answer 1

更新:

使用

.flex-container div {
  display: contents;
}

代替

.flex-container div {
  display: inline-flex;
}

display: contents 基本上忽略元素并使元素的父元素，或在本例中为 flex-container，子元素的父元素或此处的 dl 标签。这只会影响布局。子元素仍然保留从其包装元素继承的任何样式。