https://codepen.io/anon/pen/robmxp

.items { display: flex; justify-content: space-between; flex-wrap: wrap; } .item { width: 48%; height: 40px; ; background: red; margin-bottom: 10px; } .item:nth-child(1) { height: 30px; } .item:nth-child(2) { height: 50px; } .item:nth-child(3) { height: 100px; } .item:nth-child(4) { height: 80px; } 
 <div class="items"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

How to make the FLEX elements have a vertical distance between them at exactly 10px , and not adapt to the neighboring element as an example.

    2 answers 2

    The flex container needs to add the direction of the layout of the internal flex elements: flex-direction: column; . To see the next column, you need to limit the height of the flex container, for example max-height: 300px; .

    Run the sample code from this answer and see for yourself. The vertical distance is exactly 10px, as required.

     .items { display: flex; flex-direction: column; justify-content: space-between; flex-wrap: wrap; max-height: 300px; } .item { width: 48%; height: 40px; ; background: red; margin-bottom: 10px; } .item:nth-child(1) { height: 30px; } .item:nth-child(2) { height: 50px; } .item:nth-child(3) { height: 100px; } .item:nth-child(4) { height: 80px; } 
     <div class="items"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

      There are 2 options:

      Or use flex-flow: column wrap; columns with the ability to transfer blocks. It is important to specify the limitation of the wrapper in height.

       .items { display: flex; justify-content: space-between; flex-flow: column wrap; max-height: 250px; } .item { width: 48%; height: 40px; background: red; margin-bottom: 10px; } .item:nth-child(1) { height: 30px; } .item:nth-child(2) { height: 50px; } .item:nth-child(3) { height: 100px; } .item:nth-child(4) { height: 80px; } 
       <div class="items"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

      And the second option is to use a masonry mesh .

       $('.items').masonry({ itemSelector: '.item', layoutMode: 'fitRows', percentPosition: true, gutter: 10 }); 
       .items {} .item { width: 48%; height: 40px; background: red; margin-bottom: 10px; } .item:nth-child(1) { height: 30px; } .item:nth-child(2) { height: 50px; } .item:nth-child(3) { height: 100px; } .item:nth-child(4) { height: 80px; } 
       <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script> <div class="items"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>