Question

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

如果您愿意放弃商品的当前订单，则可以使用Reload and Run as seen here。否则，您可以使用JavaScript实现所描述的确切布局。

Flexbox 4项目布局

2 个答案: