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:

html<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>

css.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.