0

I'm learning about Flexbox. Currently, I have a layout that shifts to flex-direction: column in mobile. Mobile is all good.

However on the desktop view, since I need my layout to have different columns with different heights, there are gaps of white space that I'm not able to fix and find a solution for.

enter image description here

I'd like div d to be stacked right below b. not having that white space created due to a height.

This is how I currently have my code structured.

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

Any insights would be greatly appreciated. Also here's a code pen

Null isTrue
  • 1,882
  • 6
  • 26
  • 46
  • So which means after >500px you would all div's to be of equal height? And what would that height be? – Jibin Joseph Apr 21 '19 at 19:12
  • Hi Jibin, each box needs to have diff heights that is intended and needed for layout proposes. The problem is having the white space in between them. Thoughts? – Null isTrue Apr 21 '19 at 19:20
  • 1
    Given that these heights will remain fixed, no matter the screen size, some white space will remain. The question is, how would you like it to be dealt with? Would you like to vertically center the divs? – Jibin Joseph Apr 21 '19 at 19:39
  • Also, can you please explain this: "I'd like d to be along side b not having that white space created due to a height." – Jibin Joseph Apr 21 '19 at 19:39
  • I believe there's a way to not have white space in between, that's the power of flexbox that I'm yet to learn. I'd like div `d` to be stacked right below `b`. – Null isTrue Apr 21 '19 at 19:45
  • nothing in my substantial experience using flexbox have i seen a way to eliminate that whitespace you're demonstrating... because that is actually contrary to flexbox and its advantages of forcing elements on the same flex row to equal height by default (yes, it can be overridden but not in the way you're showing) – aequalsb Apr 21 '19 at 20:02

1 Answers1

0

Use grid. Much browser's version do not support 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>

Weber
  • 75
  • 9
  • Thank you llis, with grid can I still change the display to be columns in `mobile` as well as changing the order of them, as I'm currently doing and showing it on my codepen example? – Null isTrue Apr 21 '19 at 20:09
  • even using floated elements results in the same whitespace (because of the specified heights)... grid may be the answer for the OP if the OP REALLY must have layout like they're describing... my intuition says the OP would be better off abandoning specified heights in favor of fluid layout... much easier to manage and support browsers – aequalsb Apr 21 '19 at 20:22
  • Ilia's answer on codepen: https://codepen.io/anon/pen/jRKJRd – aequalsb Apr 21 '19 at 20:29
  • does the OP want the whitespace below the "d" area? it looks undesirable to me... – aequalsb Apr 21 '19 at 20:29