将柔性物品堆叠在一起

Question

我正在尝试使用flexbox构建这样的布局：

如何将物品叠放在一起？

我使用CSS网格在上面的屏幕截图上构建了什么，但是没有使用flexbox执行此操作。

.grid {
  display: grid;
  height: 100%;
  grid-template-columns: 2rem repeat(2, auto) 2rem;
  grid-template-rows: 4rem 4rem auto;
  background-color: #fff;
}

.layer1 {
  background-color: rgb(64, 213, 187);
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: span 3;
}

Answer 1

注意：此问题询问沿 z轴堆叠弹性项目。如果您来到这里寻找＆＃34;将Flex项目堆叠在彼此之上＆＃34;沿着 y轴，请参阅此帖子：prevent flex items from rendering side to side。

Flexbox旨在沿着列或行对齐元素。它不是为堆叠而设计的。

然而，CSS Grid非常适合这类事情。

Grid的CSS替代方案是绝对定位：

（请注意，当flex item is absolutely positioned时，它不再接受大多数弹性属性。）

＆＃13;

＆＃13;

article {
  display: flex;
  height: 100vh;
  position: relative;
}

section:nth-child(1) {
  flex: 1;
  background-color: turquoise;
}

section:nth-child(2) {
  position: absolute;
  top: 50px;
  left: 50px;
  right: 0;
  bottom: 0;
  background-color: salmon;
}

section:nth-child(3) {
  position: absolute;
  top: 100px;
  left: 250px;
  right: 0;
  bottom: 0;
  background-color: thistle;
}

body {
  margin: 0;
}

＆＃13;

<article>
  <section></section>
  <section></section>
  <section></section>
</article>

＆＃13;

＆＃13;

＆＃13;

jsFiddle