How to make masonry layout with flexbox

Question

I want to create masonry layout through flexbox.Child element should appear in the following order and also the child are in diffrent height and same width. I am using lazy loading.

1 2
3 4
5 6

Answer 1

Technically it's possible with flex-flow: column-wrap, but you would need to know the height of the container, so items can wrap properly, plus that you would need to reorder flex items since the default order is vertical.

@import url('https://fonts.googleapis.com/css?family=Montserrat');
html,
body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}

.container {
  height: 500px;
  width: 200px;
  display: flex;
  padding: 2px;
  flex-direction: column;
  flex-wrap: wrap;
}

.cell {
  color: white;
  background: #e91e63;
  height: 150px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid white;
  border-radius: 5px;
}

.c2 {
  order: 4;
  height: 100px;
}

.c3 {
  order: 2;
  height: 100px;
}

.c4 {
  order: 5;
  height: 200px;
}

.c5 {
  order: 3;
}

.c6 {
  order: 6;
  height: 100px;
}

<div class="container">
  <div class="cell c1">1</div>
  <div class="cell c2">2</div>
  <div class="cell c3">3</div>
  <div class="cell c4">4</div>
  <div class="cell c5">5</div>
  <div class="cell c6">6</div>
</div>

For others ending up in this question looking for a css-only masonry solution, I recommend the following answer by Michael_B (the only and most complete at the moment):

• CSS-only masonry layout but with elements ordered horizontally