带有flex的嵌套布局

Question

是否可以使用flex创建以下布局？

灰色框需要嵌套到上面的布局中，大框的最大宽度为460px，较小的框的最大宽度为213px。我的尝试就在这里，因为你可以看到前两个较小的盒子与较大的盒子的高度相匹配，但是我希望第二个更大的盒子实际上嵌在下面，而不是小盒子的生长，

.property__cards {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    .card {
        max-width:213px;
        &:first-child,
        &:last-child {
            max-width:460px;
        }
    }
}

https://codepen.io/87Development/pen/eeMYKE

Answer 1

我建议：

＆＃13;

＆＃13;

.content .grey{
  background-color: grey;
}

.content{
  width: 100%;
  display: flex;
}

.content .big-square{
  height: 150px;
  width: 150px;
}
.content .little-square{
  height: 50px;
  width: 50px;
}

.content .little-square-container{
  display: flex;
  justify-content: space-between;
}

.content .col-left{
  display: flex;
  flex-direction: column;
}

.content .col-left .little-square{
  margin-top: 5px;
}

.gutter{
  margin-top: 5px;
  height: 40px;
  width:30px;
}
.content .col-right .little-square{
  margin-bottom: 5px;
}

＆＃13;

<div class="content">
  <div class="col-left">
    <div class="big-square grey"></div>
    <div class="little-square-container">
     <div class="little-square grey"></div>
     <div class="little-square grey"></div>
    </div>
  </div>
  <div class="gutter grey"></div>
  <div class="col-right">
    <div class="little-square-container">
      <div class="little-square grey"></div>
      <div class="little-square grey"></div>
    </div>
    <div class="big-square grey"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

列之间排水沟的行为是什么？

Answer 2

这种布局似乎是CSS网格的一个更好的用例，而不是flexboxes：see forked pen。

.property__cards {
    width: 100%;
    display:grid;
    grid-template-columns: repeat(4, 210px);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column dense;
    /* other styles unchanged... */

    .card {
        &:first-child,
        &:last-child {
            grid-column: span 2;
            grid-row: span 2;
        }
        &:nth-last-child(2) {
            grid-column: 4;
        }
    }
}