0

i would like to build a flexbox with direction column. My problem is, the items should jump to the next column when the first column (view) ist full with column. The Items will be added dynamic.

  <div class="container">
  <div class="item">
   TEST
  </div>
  <div class="item">
   TEST
  </div>
  <div class="item">
   TEST
  </div>
  <div class="item">
   TEST
  </div>
  <div class="item">
   TEST
  </div>
</div>

    .container{
  display: flex;
  flex-direction: column;
}

.item{
  display: table;
  border: 1px solid blacK;
  height: 200px;
  width: 200px;
}

https://jsfiddle.net/snrz7td3/1/

something like this.

enter image description here

Taazar
  • 1,545
  • 18
  • 27
Michael Mitch
  • 403
  • 2
  • 7
  • 17
  • From what I saw in the attached images, `display: flex` is not intended for this. These links might help you: https://stackoverflow.com/questions/34480760/is-it-possible-for-flex-items-to-align-tightly-to-the-items-above-them https://isotope.metafizzy.co/ https://isotope.metafizzy.co/layout.html You might not even need a special case solution. Just regular `display: inline`. – Marian07 Nov 25 '18 at 12:56

2 Answers2

2

You need to wrap your content inside the flex container. Remember your container height need to be fixed.

.container{
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   max-height: 800px; // set height according to your need
}
Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65
  • thank you. But what is when i have 800px height and 100 items with 200x200? It is possible that when there is an overflow to increase the height automaticaly? I think with jquery it will be possible!? – Michael Mitch Nov 25 '18 at 13:08
  • Yeah, if you want the `height` to be dynamic, then you need to use javascript/jQuery. If my answer helped you correctly, Please upvote the answer to accept it. :) – Yashwardhan Pauranik Nov 25 '18 at 16:29
0

Your container needs to have a specific height and then you can use flex-wrap to make it continue onto the next column

Maxmansung
  • 63
  • 8