There is such code:

.container { display: flex; justify-content: space-between; width: 370px; padding: 0 18px; flex-wrap: wrap; } .container>div { width: 100px; height: 100px; background: red; border: 2px solid black; margin-bottom: 27px; } 
 <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>

When the div blocks inside the container is a multiple of three, then everything is reflected perfectly. But if you remove one of the blocks, then on the last line the blocks will be spread out on the right and left side.

So the question is how to make it so that if there are 5 blocks, then the fifth block would be located under the second one?

  • one
    jsfiddle.net/soledar10/cfnxzadc - soledar10
  • @ soledar10 is fun, of course, but will you explain to programmers that in a cycle we draw all the blocks, but don’t fill in the content without content?)) And if there are only 5 elements? - DaemonHK
  • Author, why are there flexs? - DaemonHK

1 answer 1

My version:

 .container { display: flex; justify-content: space-between; width: 370px; padding: 0 18px; flex-flow: row wrap; } .container>div { width: 100px; height: 100px; background: red; border: 2px solid black; margin-bottom: 27px; } .container:after{ content: ''; flex: 0 1 100px } 
 <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>

  • Thanks for the answer, but is it right for me that this code will only work with a 3-column layout, and how can I correct it for a 4-column layout? - Georgy Tarasov
  • @ GeorgiyTarasov codepen.io/Muzyka/pen/wrOJgb I sketched the code a bit more universal. - Music Sergey