Problemas de layout de blocos com flexbox em CSS

O primeiro problema do layout de blocos é bastante óbvio desde o início - é muito inconveniente o fato de o elemento pai precisar ter sua altura definida explicitamente. Afinal, é perfeitamente possível que o número de blocos mude dinamicamente e sua quantidade seja às vezes menor, às vezes maior que 9.

Já o segundo problema surgirá se a quantidade de blocos for tal que a última linha tenha um número insuficiente de blocos. Nesse caso, a última linha ficará com uma aparência terrível:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Assim, percebe-se que mesmo na horizontal, o valor space-between não funciona bem no nosso caso.

Resumindo: se a quantidade de seus elementos filhos for sempre constante e couber adequadamente no elemento pai, então o layout de blocos usando space-between é algo bastante conveniente. Caso contrário, será preciso pensar em outra solução.

Dados 12 elementos. Crie um layout de blocos com 4 elementos por linha, com a largura de cada elemento de 100px e a distância entre eles de 20px.

Dados 12 elementos. Crie um layout de blocos com 3 elementos por linha, com a largura de cada elemento de 150px e a distância entre eles de 10px.