Question

我尝试使用flex实现以下布局，但似乎无法实现：

* {
  box-sizing: border-box;
}

.box {
  border: 1px solid black;
  width: 50%;
  padding-top: 25%;
  float: left;
}

.box:first-child {
  padding-top: 50%;
}

.box:nth-last-child(-n+2) {
  width: 25%;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

如果我尝试使用flex-direction行，它将最后两个框包装在第一个左框下面

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box {
  border: 1px solid black;
  width: 50%;
  padding-top: 25%;
}

.box:first-child {
  padding-top: 50%;
}

.box:nth-last-child(-n+2) {
  width: 25%;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

如果我使用弹性方向列，我会走得更近，但必须设置一个高度，这意味着我会失去响应能力

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height:400px;
  width:100%;
}

.box {
  border: 1px solid black;
  width: 50%;
  padding-top: 25%;
}

.box:first-child {
  padding-top: 50%;
}

.box:nth-last-child(-n+2) {
  width: 25%;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

有没有一种方法可以使用flex实现这种布局，而无需固定高度或更改html结构？

Answer 1

使用flexbox，您可以考虑使用 hack 对此进行近似。一种技巧是拥有两行（保持行方向），并在第一元素上使用负边距使其与第二行重叠：

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box {
  outline: 1px solid black;
  width: 50%;
  padding-top: 25%;
}

.box:first-child {
  padding-top: 25%;
  margin-bottom:-25%;
}

.box:nth-last-child(-n+2) {
  width: 25%;
}
.box:nth-child(3) {
  margin-left:auto;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

弯曲砌体效果未正确包裹

1 个答案: