Now the blocks that are in the flexbox are centered. how to do what would they cling to the left edge

.cont { border:1px solid black; display:flex; flex-direction:column; max-height:80px; flex-wrap:wrap; } .item{ width:20px; height:20px; background: #000; margin:3px; } 
 <div class="cont"> <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 class="item"></div> <div class="item"></div> </div>

the main condition is that the direction of the blocks is preserved (flex-direction column) and at the same time they are pressed to the left edge enter image description here

    1 answer 1

    Add .cont align-content: flex-start;

     .cont { border:1px solid black; display:flex; flex-direction:column; max-height:80px; flex-wrap:wrap; align-content: flex-start; } .item{ width:20px; height:20px; background: #000; margin:3px; } 
     <div class="cont"> <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 class="item"></div> <div class="item"></div> </div>