¿Cómo cambiar la envoltura de flexbox?

Tengo una caja flexbox receptiva con tarjetas renderizadas dinámicamente (de 1 a 10 tarjetas representadas por cada llamada api) en mi aplicación. Casi hace exactamente lo que yo quiero que haga, excepto la manera en que se envuelve.

Digamos que rendericé 10 cartas, si cambio el tamaño de la pantalla para que se convierta, por ejemplo, en 4-4-2, las 2 últimas cartas estén centradas, quiero que se enrolle para que las 2 últimas cartas comiencen desde la izquierda y con el mismo espacio que las cartas anteriores . Como puedes hacer eso?

EDITAR para eloborar más: digamos que cambio el tamaño aún más en 1-1-1-1-1-1-1-1-1-1, las tarjetas deben aparecer centradas, todavía necesito el centrado, pero quiero las 2 últimas tarjetas para envolver desde el lado izquierdo si se convierte en 4-4-2 o 3-3-2 etc.

https://codepen.io/hyrosian/pen/EXKZJz

.card { text-align: center; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5; max-width: 300px; margin: 2rem; padding-bottom: 1rem; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .recipe-grid { display: flex; flex-wrap: wrap; justify-content: space-around } 
 

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Si usa Flexbox y sin secuencia de comandos, puede crear elementos fantasmas , de modo que llenen el espacio en la última línea.

Por lo tanto, para una posible longitud de columna de 4, necesita 3 elemento fantasma y así sucesivamente.

También es posible usar los pseudo elementos, lo que disminuirá los fantasmas necesarios en 2.

 .card { text-align: center; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5; max-width: 300px; margin: 2rem; padding-bottom: 1rem; } .card:empty { width: 300px; box-shadow: none; margin: 2rem; padding-bottom: 0; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .recipe-grid { display: flex; flex-wrap: wrap; justify-content: space-around } 
 

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Egg beef sandwich

604 kcal - totally vegan

Cambia tu CSS de la siguiente manera:

 .recipe-grid { display: flex; flex-wrap: wrap; justify-content: flex-start } 

Agregue margen a las tarjetas si es necesario.