Flex容器中的DIV向下推整行

时间:2019-07-18 19:01:17

标签: css flexbox

我正在使用指令在angular / js应用程序上工作,这个特定的flex-container使用了divs(指令),它可能包含一个或多个项目。当一个指令包含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个项目的div开始,并只包装那些不适合第二行的项目?

2 个答案:

答案 0 :(得分:0)

更新:

使用

.flex-container div {
  display: contents;
}

代替

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

答案 1 :(得分:0)

在这里显示Roya的建议可以解决问题...

        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;
        margin-right: 2rem;
        margin-top: 1rem;
    }

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

    .flex-container div {
        display: contents;
    }

    <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></div>
      <div>
        <dl class="bubble">5</dl>
        <dl class="bubble">6</dl>
        <dl class="bubble">7</dl>
      </div>
    </div>