Flexbox:两个元素在flex方向上彼此重叠:row

Question

我想要实现以下目标:

---

我的第一次尝试是使用辅助div(绿色):

的jsfiddle

我在这里可以做的是使用JavaScript将移动屏幕上的puple和orange元素移出帮助器.但必须采用简单的CSS方式.

---

我的第二次尝试是删除帮助程序并构建移动布局:

的jsfiddle

---

有没有办法将两个元素放在一起flex-direction: row？(第二次尝试)

Answer 1

你可以这样做,Flexbox但你需要使用固定height的Flex容器.这是小提琴

基本上你用flex-wrap: wrap用flex-direction: column,让第一个项目采取100%的高度,并设置width在%.然后使用媒体查询和高度更改顺序.

* {
  box-sizing: border-box;
}
main,
div {
  display: flex;
  padding: 1rem;
}
.desktop {
  flex-direction: column;
  flex-wrap: wrap;
  height: 400px;
  width: 100%;
}
div {
  flex: 1;
  width: 30%;
}
[orange] {
  background-color: #FFAD77;
  flex: 0 0 70%;
}
[yellow] {
  background-color: #FFE377;
  flex: 0 0 100%;
  width: 70%;
}
[purple] {
  background-color: #FF77C8;
}
@media(max-width: 480px) {
  .desktop div {
    flex: 1;
    width: 100%;
  }
  div[orange] {
    order: -1;
    flex: 2;
  }
  div[yellow] {
    flex: 5;
  }
  div[purple] {
    flex: 1;
  }
}

<div class="desktop">
  <div yellow>lorem</div>
  <div orange>lorem</div>
  <div purple>lorem</div>
</div>