Oi, Lucas, tudo bem?

A propriedade display: flex; por padrão tem o comportamento de linha para os elementos, o valor row. Quando queremos que o elementos fiquem verticalmente utilizamos o propriedade, felx-direction: column para modificar o valor padrão. Sobre o espaçamento, que o seria onde acabar e onde começa ele divide o largura que está disposto o display: flex; pela quantidade dos elementos.

O display flex tem uma propriedade justify-content: center ou space-around ou space-between ou flex-start ou flex-end para posicionar esses elementos em colunas dentro da caixa. Mas a altura pré-definada em 250px permite que a altura das colunas tenha esse comportamento de quebra justamente com o display: flex e flex-flow: wrap;

Para saber mais: https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox

Qualquer dúvida é só falar!

Olá, pessoal.

Eu tenho a mesma dúvida que o Lucas. A Laís já explicou, mas sigo sem entender.

No exemplo da aula, temos 4 tags h4, cada uma com uma quantidade de tags a.

Como o flex quebrou a linha para que cada coluna começasse exatamente com o h4 ?

Oi, Luciana, tudo bem?

Na sessão Mapa de cursos há uma tag section que envelopa a lista de links de linguagens de cursos. A classe rodapePrincipal-navMap-list que é a classe que está na tag section está com display: flex, então, os seus filhos adquirem o comportamento flex, nesse caso, os titulos h4 e a. Por definição, o display-flex: define como um ítem será flexinado para caber no espaço disponível dentro de seu container. Então, temos um espaço definido que será dividido pelos itens que estarão dentro desse container.

O Flex sabe que h4 e a são filhos da classe rodapePrincipal-navMap-list que está definida como display: flex. E juntamente com a propriedade flex-flow: colunm-wrap que irá os links a para que fiquem em coluna e a definição do height: 250px ou seja, a junção das propriedades display: flex, flex-flow: wrap e height: 250px fizeram com que houvessem quebra das colunas.

Pessoal,

Na minha humilde opinião a quebra das colunas no ponto desejado só foi possível porque houve definição prévia da altura do elemento pai (height: 250px).