让 flexbox 子对象包裹在多行高的子对象周围

Question

我正在遍历项目列表（红色框）。我有另一个不属于此列表的元素，我想将其插入右上角的项目网格（高蓝色框）。我正在使用 flexbox 并命令相应地定位它。但我希望第二行红色项目的宽度为 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>

值得注意的是，我知道我可以用浮动来做到这一点，但由于与这个问题无关的其他原因，我有点卡在 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 解决方案，它使用了 Grid：

.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

Answer 2

.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;
  margin-bottom: -57px;  /* added */
}

.flex>div:nth-child(6) { /* added */
  margin-right: 27px;
}

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

Answer 3

这是我的另一个答案的一个版本，它也可能被视为重复，但由于它具有更简单的 CSS，我决定将其发布为答案。

它使用order 属性和绝对位置来启用所需的布局。

在此处阅读更多信息：Flexbox or Column CSS for positioning elements like this

堆栈sn-p

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

.container .right_corner > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(200% + 10px);
  background: blue;
}

.container::before,
.container > div {
  height: 50px;
  margin: 5px;
}

.container > div:not(:first-child) {
  background: red;
}

.container .right_corner {
  position: relative;
  order: 1;
}

.container::before {
  content: '';
  order: 3;
}

@media (max-width: 600px){
  .container > div:nth-child(n+5) {
    order: 2;
  }
  .container > div:nth-child(n+8) {
    order: 4;
  }
  .container::before,
  .container > div {
    width: calc((100% / 4) - 10px);
  }
}

@media (min-width: 601px) and (max-width: 800px){
  .container > div:nth-child(n+6) {
    order: 2;
  }
  .container > div:nth-child(n+10) {
    order: 4;
  }
  .container::before,
  .container > div {
    width: calc((100% / 5) - 10px);
  }
}

@media (min-width: 800px) {
  .container > div:nth-child(n+7) {
    order: 2;
  }
  .container > div:nth-child(n+12) {
    order: 4;
  }
  .container::before,
  .container > div {
    width: calc((100% / 6) - 10px);
  }
}

<div class='container'>

  <div class='right_corner'>
    <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></div>
  <div></div>

  <div></div>
  <div></div>

</div>