使弹性项目包装到下一行，随后的项目继续该流程 [英] Make flex item wrap to the next row with following items continuing the flow

问题描述

我希望红框位于第二行，但随后我希望在其后定义的div继续第一行，以便所有黑框实际上都包裹在黑框周围.可以用flexbox做到吗?

I want the red box to be on the 2nd row, but then i want the divs that are defined after it, to continue on the first line, so that all the black boxes essentially wrap around the black box. Can this be achieved with flexbox?

它应该看起来像这样:

+---+---+---+---+---+
| 1 | 2 | 3 | 5 | 6 |
+---+---+---+---+---+
|         4         |
+---+---+---+---+---+
| 7 | 8 | 9 |10 |11 |
+---+---+---+---+---+
|12 |13 |
+---+---+

* {
  box-sizing: border-box;
}

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

.a {
  border: 1px solid black;
  height: 50px;
  width: 20%;
}

.b {
  border: 1px solid red;
  height: 50px;
  width: 100%;
}

<div class="container">
  <div class='a'>1</div>
  <div class='a'>2</div>
  <div class='a'>3</div>
  <div class='b'>4</div>
  <div class='a'>5</div>
  <div class='a'>6</div>
  <div class='a'>7</div>
  <div class='a'>8</div>
  <div class='a'>9</div>
  <div class='a'>10</div>
  <div class='a'>11</div>
  <div class='a'>12</div>
  <div class='a'>13</div>
</div>

请参见 https://codepen.io/anon/pen/OqqeJN

推荐答案

使用CSS网格可以更好地完成此任务:

You will have better luck using CSS grid for this task:

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: dense; /* this will make the elements to flow around*/
}

.a {
  border: 1px solid black;
  height: 50px;
}

.b {
  border: 1px solid red;
  height: 50px;
  /*full width row*/
  grid-column: 1/-1;
}

<div class="container">
  <div class='a'>1</div>
  <div class='a'>2</div>
  <div class='a'>3</div>
  <div class='b'>4</div>
  <div class='a'>5</div>
  <div class='a'>6</div>
  <div class='a'>7</div>
  <div class='a'>8</div>
  <div class='a'>9</div>
  <div class='a'>10</div>
  <div class='a'>11</div>
  <div class='a'>12</div>
  <div class='a'>13</div>
</div>

密集

如果指定，自动放置算法将使用密集"打包算法，如果稍后出现较小的项目，该算法会尝试在网格中尽早填充孔.这可能会导致项目出现乱序，这样做会填补较大项目留下的空缺.

If specified, the auto-placement algorithm uses a "dense" packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.^ref

这篇关于使弹性项目包装到下一行，随后的项目继续该流程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！