seria interessante explicar o flexbox que são aplicado somente a tag pai e os que são aplicado a tags filhas, ex. display: flex é aplicado a tag pai, que tem como padrão o alinhamento row, se eu quiser mudar para columns tenho que aplicar a tag pai o flex-direction, mas como e quando eu aplico alguma tag ao filho?
hoje, com a Alura e o Google Gemini
Olá, Luciano!
É muito importante entender como o flexbox funciona tanto para a tag pai quanto para as tags filhas, agredemos por compartilhar essa questão conosco . Quando aplicamos a propriedade display: flex na tag pai, estamos definindo que ela se comportará como um container flexível, permitindo que suas tags filhas sejam organizadas de forma flexível dentro dele.
Para aplicar propriedades ao filho, podemos utilizar as propriedades específicas do flexbox. Por exemplo, se você deseja alinhar um elemento filho verticalmente dentro do container, você pode utilizar a propriedade align-self no elemento filho. Veja um exemplo:
<div class="container">
<div class="filho">Elemento filho</div>
</div>
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.filho {
align-self: center;
}
Nesse exemplo, a propriedade align-self: center está sendo aplicada ao elemento filho, fazendo com que ele seja centralizado verticalmente dentro do container.
Existem diversas outras propriedades que podem ser utilizadas para manipular o posicionamento e o tamanho dos elementos filhos dentro do container flex.
Agradecemos imensamente pelo seu feedback valioso. Ele é de extrema importância para nós.
Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!