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

问题描述

我希望红色框位于第二行，但随后我希望在它之后定义的 div 继续在第一行，以便所有黑框基本上都环绕在黑框周围.这可以通过 flexbox 实现吗?

它应该是这样的:

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

* {box-sizing: 边框框；}.容器 {显示:弹性；flex-wrap: 包裹;}.一个 {边框:1px纯黑色；高度:50px；宽度:20%；}.b {边框:1px纯红色；高度:50px；宽度:100%；}

<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>

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

解决方案

使用 CSS 网格来完成这项任务会有更好的运气:

* {box-sizing: 边框框；}.容器 {显示:网格；网格模板列:重复(5，1fr)；网格自动流:密集；/* 这将使元素四处流动*/}.一个 {边框:1px纯黑色；高度:50px；}.b {边框:1px纯红色；高度:50px；/*全宽行*/网格列:1/-1；}

<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>

<块引用>

密集

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

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?

It should look like this:

+---+---+---+---+---+
| 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>

See https://codepen.io/anon/pen/OqqeJN

解决方案

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>

dense

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屋！