For example, the following blocks:

div.flex { display: flex; flex-flow: row wrap; justify-content: space-between; } div.flex > div { width: 30%; border: 1px solid #000; height: 10px; margin: 10px 0 } 
 <div class="flex"> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

All is good, but the last line I want to do this: enter image description here

How to do it? Of course, you can add an empty element to the end:

 div.flex { display: flex; flex-flow: row wrap; justify-content: space-between; } div.flex > div { width: 30%; border: 1px solid #000; height: 10px; margin: 10px 0 } div.flex > span { width:30%; } 
 <div class="flex"> <div></div> <div></div> <div></div> <div></div> <div></div> <span></span> </div>

but blocks can be adaptive or fixed width, this method will not work

  • What do you think about the new solution? - Vadim Ovchinnikov

2 answers 2

For the case when you need to simulate the addition of just one element (as in the example), you can use the pseudo-class for the container

 .flex:after { content: ""; width: 30%; }

You can also simulate adding two elements using the before pseudo- before , as well as the order property:

 div.flex { display: flex; flex-flow: row wrap; justify-content: space-between; } div.flex > div { width: 20%; border: 1px solid #000; height: 10px; margin: 10px 0 } .flex:before { content: ""; width: 20%; order: 99999; } .flex:after { content: ""; width: 20%; } 
 <div class="flex"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

But there is probably no other universal solution , without changing the fact that it is a flexbox and not using JavaScript.

Therefore, if the proposed solution does not fit, then setting the empty elements you will succeed. There may be several of them and you can remove them all or partially from the display stream using display: none; and, if necessary, media queries.

  • one
    @Yuri, a solution for a particular case is possible and there will be, in the general case - hardly - Grundy
  • This way is clear, I’m interested in whether there is no simpler and more beautiful method, maybe I just haven’t found a rule ... - Crantisz
  • @Crantisz, for a specific case, instead of space-between, you can use flex-start and adjust the intervals with the help of the margin. then empty elements will not be needed - Grundy
  • one
    @VadimOvchinnikov, for example, calculating the number of necessary empty elements - Grundy
  • one
    @Grundy, this is the only way, there are no more solutions - Yuri

There is a great beautiful and concise way. Let's apply some sass knowledge and get a great example.

 .container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } .item { height: 80px; background-color: green; $gutter: 20px; $card-count: 3; width: calc(100% / #{$card-count} - #{$gutter} * (#{$card-count} - 1) / #{$card-count} ); margin-right: $gutter; margin-bottom: 20px; &:nth-of-type(#{$card-count}n) { margin-right: 0; } } 
 <div class="container"> <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>

  • Your example is not adaptive - Crantisz
  • For breakpoint adaptability, change the $ card-count variable - Dmitri Novikov