Where did I screw up with flex?

Question

css

The bottom line is that let's say there are n-elements in the flex container and initially there are 3 of them, with a decrease in width 2, and then all 1.
Here is the flex container

.content-catalog__items
{
    margin-top: 20px;
    margin-bottom: 20px;
    padding-right: 10px;
    padding-left: 10px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-start;
}

And here is the flex element

.content-catalog__items .content__new-products__item
{
    flex:  1 1 240px;
    margin-bottom: 20px;
}

But when we allow the number of elements to be asymmetrical, for example, if there are 9 elements in the flex container, then when I shift the flex to 2 elements per line, one will not have a pair.
So it starts to flatten out to the full width of the flex container (My example is on the screen)

Is it possible to somehow save the coefficient. stretching to do so that it does not flatten?

Answer 1

For such cases, add a few more (how many depends on how many elements may be missing to a whole line) empty elements with zero height.
If you need to add only 1 or 2 such elements, as in your case, then you can get by with pseudo-elements.
https://jsfiddle.net/mdeoxjb6/

Answer 2

flex: 0 0 240px; / flex: 0 1 240px;
1) https://jsfiddle.net/po9n4tya/
2) https://jsfiddle.net/po9n4tya/1/

Answer 3

Alternatively, you need to limit the maximum block width, you can also write the width of the blocks, you can play around with media queries. For example:

.content-catalog__items .content__new-products__item {
  max-width: 240px;
}

// Или

.content-catalog__items .content__new-products__item {
  flex-basis: 50%;
  width: 50%;
  //на медии менять процентаж
}