1

I am trying to have flexbox elements move to be right underneath the element on top of it, but I cannot figure out how. Is there a way to do this? Each of the elements is supposed to be adaptive, but the spacing is always the same.

Please use the full-screen on the snippet!

.container {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

.container div {
    width: 25em;
    min-height:75vh;
    text-align: center;
    position: relative;
    min-height:100px;
    padding: 5px;
    margin: 2em;
    background-color: red;
    border-radius: 0.6em;
    margin-top: 0em;
    flex-direction: column;
    display: flex;
    justify-content: center;
}
<div class="container">
  <div>
    <p>Hi man</p>
    <p>Hi man</p>
  </div>
  <div>
    <p>Hi man</p>
    <p>Hi man</p>
    <p>Hi man</p>
    <p>Hi man</p>
    </div>
  <div>
    <p>Hi man</p>
    <p>Hi man</p>
    <p>Hi man</p>
    
  </div>
  <div>    
    <p>Hi man</p>
   </div>
  <div>    
    <p>Hi man</p>    
    <p>Hi man</p>
  </div>
  <div></div>
</div>
nude boson
  • 19
  • 1
  • 1
    Can't be done with flexbox. The only way to achieve this effect without JavaScript is using CSS `columns` property, but this means upon resize your elements will jump from the bottom of a column to the top of the next or vice-versa. The JavaScript options include a few well known scripts: Masonry, Isotope, Bootstrap-waterfall and the so-called "Pinterest" script. This question was asked countless times before. Please research those first. – tao Nov 15 '17 at 23:28
  • @AndreiGheorghiu i tried searching before but I didn't know how exactly to phrase. i will look for other approaches. sorry. – nude boson Nov 15 '17 at 23:30
  • Do you mean you want the elements to be stacked on top of each other? Wouldn't removing the margin on container div do that? I'm not sure if I understand the question fully by how you're phrasing it – webdevdani Nov 15 '17 at 23:51

0 Answers0