[Dúvida] Display Flex

Oii Paloma, tudo bem?

Realmente o flexbox é confuso no início, mas com a prática, você vai pegar o jeito.

O Flexbox, é um modelo de layout que permite que você controle o alinhamento, direção, ordem e tamanho dos elementos de uma página, de uma maneira mais eficiente e com menos código do que os métodos tradicionais.

Quando você define display: flex em um elemento, ele se torna um container flexível. Isso faz com que todos os seus filhos diretos se comportem de acordo com as regras do Flexbox.

No exemplo que você está estudando, temos um container com quatro quadrados. Quando você define display: flex no container, os quadrados são alinhados horizontalmente por padrão. Isso acontece porque o valor padrão da propriedade flex-direction é row, que organiza os itens em linhas.

Agora, se você quer que os quadrados se alinhem verticalmente, você precisa mudar a direção do flex. Para isso, você usa a propriedade flex-direction: column. Isso fará com que os quadrados se alinhem um abaixo do outro, como em uma coluna.

Então, a resposta correta para a atividade é a alternativa C) Podemos adicionar a propriedade flex-direction: column ao CSS da classe .container.

Deixo abaixo um artigo completinho sobre Flexbox, espero que te ajude:

Flexbox CSS: Guia Completo, Elementos e Exemplos

Um abraço e bons estudos.

Boa noite, Lorena. Obrigado pela sua ajuda, ainda continuo tentando. Agora as coisas já parecem mais claras kkk