Oi Israel, tudo bem?

Em relação à sua pergunta sobre o uso de flex-wrap: wrap quando o valor padrão da propriedade flex-direction é row, é importante entender que o flex-wrap controla o comportamento de como os itens filhos são distribuídos em relação ao eixo principal do container. Quando definimos flex-wrap: wrap, estamos permitindo que os itens sejam quebrados em outras linhas, caso não caibam na largura do container.

Porém, se o flex-direction for definido como row, o eixo principal será o eixo horizontal, e o flex-wrap fará com que os itens sejam quebrados em outras linhas nesse eixo, não na vertical. Ou seja, o flex-wrap não terá efeito na quebra dos elementos em linhas verticais quando o valor padrão flex-direction: row é utilizado.

Veja o exemplo abaixo:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

Nesse caso, mesmo com flex-wrap: wrap, os itens serão quebrados em linhas horizontais, pois o valor padrão de flex-direction é row. Para que os itens sejam quebrados em linhas verticais, é necessário alterar o valor de flex-direction para column.

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Com essa alteração, os itens serão distribuídos verticalmente, e quando não couberem mais na altura do container, serão quebrados em outras linhas verticais, de acordo com o valor de flex-wrap.

É importante lembrar também que a quebra dos itens em linhas é influenciada pelo tamanho dos itens e do container, então é preciso ficar atento a esses valores para que a distribuição dos elementos seja adequada ao design do layout.

Espero que tenha te ajudado!

Um abraço e bons estudos.