子元素的CSS柔性盒定位

Question

我在试着填补我的柔性盒布局的可用空间。目标是用项目2和项目3填充第一个项目元素旁边的空空间，而项目4-6位于一个新的行中。

HTML：

<section class="projects">
  <article>
    Project 1
  </article>
  <article>
    Project 2
  </article>
  <article>
    Project 3
  </article>
  <article>
    Project 4
  </article>
  <article>
    Project 5
  </article>
  <article>
    Project 6
  </article>
</section>

CSS (SCSS)：

.projects {
  display: flex;
  flex-flow: row wrap;

  article {
    align-items: center;
    display: flex;
    flex: 0 50%;
    height: 10rem;
    justify-content: center; 

    &:nth-child(1) {
      background-color: #c00;
      height: 20rem;
    }

    &:nth-child(2) {
      background-color: #0c0;
    }

    &:nth-child(3) {
      background-color: #00c;
    }

    &:nth-child(4) {
      background-color: #cc0;
      flex: 1 30%;
      order: 5;
    }

    &:nth-child(5) {
      background-color: #c0c;
      flex: 1 auto;
    }

    &:nth-child(6) {
      background-color: #0cc;
      flex: 1 auto;
      order: 6;
    }
  }
}

我为此创建了一个代码示例。我想要得到的在这幅图像中显示出来。

我还缺什么来解决这个问题呢？

Answer 1

一个(棘手的)可能性是利用空白处。

我在第一个元素中增加了一个负值，以允许它溢出。

现在有3行，第3个元素开始第2行。

我给它加了一个左边框，把它放在第二个元素下面。

​

.projects {
  display: flex;
  flex-flow: row wrap;
}
.projects article {
  align-items: center;
  display: flex;
  flex: 0 50%;
  height: 10rem;
  justify-content: center;
}
.projects article:nth-child(1) {
  background-color: #c00;
  height: 20rem;
  margin-bottom: -10rem;  /* added  */
}
.projects article:nth-child(2) {
  background-color: #0c0;
}
.projects article:nth-child(3) {
  background-color: #00c;
  margin-left: 50%;   /* added */
}
.projects article:nth-child(4) {
  background-color: #cc0;
  flex: 1 30%;
  order: 5;
}
.projects article:nth-child(5) {
  background-color: #c0c;
  flex: 1 auto;
}
.projects article:nth-child(6) {
  background-color: #0cc;
  flex: 1 auto;
  order: 6;
}

<section class="projects">
  <article>
    Project 1
  </article>
  <article>
    Project 2
  </article>
  <article>
    Project 3
  </article>
  <article>
    Project 4
  </article>
  <article>
    Project 5
  </article>
  <article>
    Project 6
  </article>
</section>

​