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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsfiddle demo

css grid browser support

Answer 2

这是我的另一个答案的版本，也可能有资格作为副本，但由于它有一个更简单的CSS，我决定将其作为答案发布。

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

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

Stack snippet

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

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