Question

我正在尝试填充我的flexbox布局的可用空间。目标是用项目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;
    }
  }
}

我为此创建了一个codepen example。我希望获得的内容显示在this image。

我想要解决这个问题的原因是什么？

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>

CSS弹性框定位子元素

1 个答案: