Flexbox

Olá Jaqueline, tudo bem?

Fico feliz em saber que você está estudando sobre Flexbox! Essa propriedade é muito útil para criar layouts flexíveis e responsivos em páginas web.

O display: flex deve ser utilizado quando você deseja criar um container flexível, ou seja, um elemento que possa conter outros elementos e que permita a manipulação do layout desses elementos filhos. É importante lembrar que o display: flex deve ser aplicado no elemento pai, ou seja, no container.

A melhor forma de pensar para utilizar essa propriedade é entender que o Flexbox permite que você organize os elementos filhos de diversas formas, seja em linhas ou colunas, com espaçamento uniforme ou variável, com alinhamentos específicos, entre outras possibilidades. Para isso, é importante conhecer as propriedades do Flexbox, como justify-content, align-items, flex-direction, entre outras.

Um exemplo prático de utilização do display: flex seria para criar um menu horizontal, em que cada item do menu é um elemento filho do container flexível. Dessa forma, é possível alinhar os itens do menu com espaçamento uniforme e garantir que eles se ajustem automaticamente conforme a largura da tela.

Espero ter ajudado e bons estudos!