html - 让 flexbox children 包裹着一个多行高的 child

Question

我正在迭代元素列表(红色框)。我有另一个不属于此列表的元素，我想将其插入到右上角的元素网格中(高蓝色框)。我正在使用 flexbox 并为了相应地定位它。但我希望第 2 行红色元素的宽度为 3 项，并与蓝色放在一起内联包装。下面是我理想结果的屏幕截图。我失败尝试底部的代码。

.flex {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  max-width: 120px;
}

.flex>div {
  background: red;
  height: 25px;
  width: 25px;
  margin: 2px;
  order: 3;
}

.flex>div:nth-child(-n+3) {
  order: 1;
}

aside {
  height: 55px;
  width: 25px;
  margin: 2px;
  background: blue;
  order: 2;
}

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <aside></aside>
</div>

值得注意的是，我知道我可以用 float 来做到这一点，但由于与这个问题无关的其他原因，我有点受困于 flexbox。对任何和所有建议持开放态度。

Answer 1

这是您在使用 flexbox 时遇到的问题，以及几个可能的解决方案:

• > Is it possible for flex items to align tightly to the items above them?
• > Make a div span two rows in a grid

这是一个使用 flexbox 的计算器键盘布局:

• > Calculator keypad layout with flexbox

这是使用网格的最简洁、最高效的 CSS 解决方案:

.flex {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 25px;
  grid-gap: 5px;
  margin: auto;
  max-width: 120px;
}

aside {
  grid-column: 4;
  grid-row: 1 / span 2;
  background: blue;
}

.flex > div {
  background: red;
}

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <aside></aside>
</div>

jsfiddle demo

css grid browser support