CSS Flexbox |固定Flex列高度之间的空间

Question

我正在学习Flexbox。目前，我在移动设备上的布局已转换为flex-direction: column。移动一切都很好。

但是在桌面视图上，由于我需要布局具有不同高度的不同列，因此存在空白空间，我无法修复并找到解决方案。< / p>

我希望将div d堆叠在b的正下方。由于a的高度而没有创建空白。

这是我目前的代码结构。

 <div class="parent">
  <div class="col a">a</div>
  <div class="col b">b</div>
  <div class="col c">c</div>
  <div class="col d">d</div>
</div>

/* Some default styles to make each box visible */
.a {
  background: #e67e22;
  heigth: 300px;
}
.b {
  background: #e74c3c;
}
.c {
  background: #9b59b6;
}
.d {
  background: #34495e;
}

.parent {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  width: 100%;
}

.col {
  width: 50%;
}

.col.a {
  height: 500px
}

.col.b {
  height: 250px
}

.col.c {
  height: 90px
}

.col.d {
  height: 200px
}

.col.b {
  align-self: baseline;
}

@media all and (max-width: 500px) {
  .container {
    height: auto;
  }
  .a, .b, .c, .d { width: 100%; }
  .b {
    order: 3;
  }
}

任何见解将不胜感激。 这也是code pen

Answer 1

使用网格。许多浏览器版本不支持Flex。

.f-container:after,.f-container:before,.f-row:after,.f-row:before{content:"";display:table;clear:both}.f-col{float:left;width:100%}
.f-col.s1{width:8.33333%}.f-col.s2{width:16.66666%}.f-col.s3{width:24.99999%}.f-col.s4{width:33.33333%}
.f-col.s5{width:41.66666%}.f-col.s6{width:49.99999%}.f-col.s7{width:58.33333%}.f-col.s8{width:66.66666%}
.f-col.s9{width:74.99999%}.f-col.s10{width:83.33333%}.f-col.s11{width:91.66666%}.f-col.s12{width:99.99999%}
@media (min-width:601px){.f-col.m1{width:8.33333%}.f-col.m2{width:16.66666%}.f-col.m3,.f-quarter{width:24.99999%}.f-col.m4,.f-third{width:33.33333%}
.f-col.m5{width:41.66666%}.f-col.m6,.f-half{width:49.99999%}.f-col.m7{width:58.33333%}.f-col.m8,.f-twothird{width:66.66666%}
.f-col.m9,.f-threequarter{width:74.99999%}.f-col.m10{width:83.33333%}.f-col.m11{width:91.66666%}.f-col.m12{width:99.99999%}}
@media (min-width:993px){.f-col.l1{width:8.33333%}.f-col.l2{width:16.66666%}.f-col.l3{width:24.99999%}.f-col.l4{width:33.33333%}
.f-col.l5{width:41.66666%}.f-col.l6{width:49.99999%}.f-col.l7{width:58.33333%}.f-col.l8{width:66.66666%}
.f-col.l9{width:74.99999%}.f-col.l10{width:83.33333%}.f-col.l11{width:91.66666%}.f-col.l12{width:99.99999%}}

.a {
  background: #e67e22;
  height: 500px
 }
.b {
  background: #e74c3c;
  height: 250px
 }
.c {
 background: #9b59b6;
 height: 90px
 }
.d {
 background: #34495e;
 height: 200px;
}  



<div class="f-row">
 <div class="f-col s12 m6 l6">
  <div class="col a">a</div>
  <div class="col c">c</div>
 </div>
<div class="f-col s12 m6 l6">
 <div class="col b">b</div>
 <div class="col d">d</div>  
</div>