Flexbox 4 项目布局

Question

我无法让 flex 与我当前的布局一起工作。我试图让 1 到 3 之间的垂直空间消失。我意识到我可以通过将这两个包装在一个容器中来解决这个问题，但我不希望这样做，因为我将使用 flex 的 order 属性根据媒体查询在框 1 和框 3 之间移动框 2。我曾尝试在框 1 上使用align-self: flex-start，但这似乎并不能解决问题。有什么想法吗？

.flex-con {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 300px;
}
.box {
  width: 40%;
  margin: 0 10px;
  font-size: 20px;
  text-align: center;
}

.one {
  height: 40%;
  border: 2px solid red;
}

.two {
  height: 60%;
  border: 2px solid blue;
}
.three {
  height: 50%;
  border: 2px solid green;
}
.four {
  height: 50%;
  border: 2px solid yellow;
}

<div class="flex-con">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
  <div class="box four">4</div>
</div>

Answer 1

也许这不是正确的答案，但你可以用flex-direction: column; 来做砖石风格

* {
  box-sizing: border-box;
}

.flex-con {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 300px;
}

.box {
  font-size: 20px;
  text-align: center;
}

.one {
  flex: 0 0 40%;
  border: 2px solid red;
}

.two {
  flex: 0 0 60%;
  border: 2px solid blue;
}
.three {
  flex: 0 0 50%;
  border: 2px solid green;
}
.four {
  flex: 0 0 50%;
  border: 2px solid yellow;
}

<div class="flex-con">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
  <div class="box four">4</div>
</div>

Answer 2

如果您愿意放弃当前的商品订单，则可以使用flex-direction: column;as seen here。 否则，您可以实现使用 JavaScript 描述的精确布局。