2

.flex-body {
  display: flex;
  flex-wrap: wrap;
}
.flex-body div{
  width: 50%;
  align-items: flex-start;
}
<div class="flex-body">
  <div style="background: #0980cc; height:100px;"></div>
  <div style="background: #09cc69;height: 200px;"></div>
  <div style="background: #cc092f;height:170px;"></div>
  <div style="background: #0980cc; height:130px;"></div>
  <div style="background: #09cc69;height: 100px;"></div>
  <div style="background: yellow;height: 100px;"></div>
</div>

I want to fill the white space between rows in flex container, each element has a different height and I want the element to be stacked on top of each other directly

Check this fiddle

baha almomani
  • 111
  • 7
  • I think it is not clear enough what you want to achieve to answer your question. Could you please elaborate more the intended layout and the difference to the present layout? – Lars Gendner Mar 20 '18 at 13:10
  • @LarsGendner If you can see the white space below the first blue element – baha almomani Mar 20 '18 at 13:12
  • 1
    well it's always hard for me to find this duplicate :) i sould make it as favorite next time i find it ... but @LGson will close it when he comes ;) – Temani Afif Mar 20 '18 at 13:12
  • I don't know if I understand correctly, but what you want is a Massonry grid with flexbox? – Rinho Mar 20 '18 at 13:22
  • I don't think its possible with `flexbox`... – Bhuwan Mar 20 '18 at 13:34
  • 1
    With flexbox you can play with max-height and `flex-direction: column` [example](https://jsfiddle.net/13g3hojm/5/) – Rinho Mar 20 '18 at 13:38

1 Answers1

-1

The blank spaces only exist because you set the height of each Flex child. Just don't, and they'll naturally fill the space.

.flex-body {
  display: flex;
  flex-wrap: wrap;
  width : 100vw;
  height: 80vh;
}

.flex-body div{
  flex-basis : 50%;
  align-items: flex-start;
  outline: blue dashed 2px;
}
<div class="flex-body">
  <div style="background: #0980cc;"></div>
  <div style="background: #09cc69;"></div>
  <div style="background: #cc092f;"></div>
  <div style="background: #0980cc;"></div>
  <div style="background: #09cc69;"></div>
  <div style="background: yellow;"></div>
</div>
Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63