0

I am trying to use display: flex to stack child-divs like this: Example

I tried:

.parent {
    display: flex;
    flex-wrap: wrap;
}
. children {
    flex-basis: 50%;
}

But then the Items are vertically aligned (Every child has one starting right next to it).

Additionally i want the lowest (vertical-wise) to be certain items.

How can i accomplish that, thank you in advance!

.children {
  padding: 10px;
  border: 1px solid;
  flex-basis: 45%;
}
.parent {
  display: flex;
  flex-wrap: wrap;
}
<div class="parent">
  <div class="children height1">Heriberto Nickel<br>New Line for different Heights<br>AnotherLine</div>
  <div class="children">Brittaney Haliburton</div>
  <div class="children">Maritza Winkler</div>
  <div class="children">Carmon Rigg<br>AnotherLine</div>
  <div class="children">Alice Marmon</div>
  <div class="children">Lyman Steakley</div>
  <div class="children">Zenia Correa<br>AnotherLine</div>
</div>

4
  • question require minimal reproducible example.. plz read
    – نور
    Sep 2, 2020 at 5:16
  • Provide your html code as well that is related with the CSS you have provided.
    – Gosi
    Sep 2, 2020 at 5:41
  • What you want is called "masonry layout", I don't have enough knowledge to explain but try searching for it.
    – ranieri
    Sep 2, 2020 at 5:47
  • 1
    for a 2 column ... column-count:2 should also be fine enough : stackoverflow.com/questions/1964297/… example : jsfiddle.net/ev8npmoa
    – G-Cyrillus
    Sep 2, 2020 at 7:52

0

Browse other questions tagged or ask your own question.