Olá, eu fiquei com dúvida em como separar os itens que são clicáveis como exemplo abaixo:
Instagram e GitHub como se vê abaixo seguem grudados, quero entender como eu os separo.
Olá, eu fiquei com dúvida em como separar os itens que são clicáveis como exemplo abaixo:
Instagram e GitHub como se vê abaixo seguem grudados, quero entender como eu os separo.
Oi Jefferson, tudo bem?
Durante essa aula as pessoas instrutoras ensinam como fazer isso. Eles usam o seguinte código:
.apresentacao__links{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 32px;
}
display: flex;: Isso configura o modelo de layout flexível para os elementos dentro da classe ".apresentacao__links". Isso significa que os elementos dentro dessa seção serão exibidos em um formato flexível, permitindo um fácil controle do posicionamento e dimensionamento.
flex-direction: column;: Define a direção principal do layout flexível como "column" (coluna). Isso significa que os elementos dentro da classe serão empilhados verticalmente, um abaixo do outro.
justify-content: space-between;: Isso alinha os elementos verticalmente e distribui o espaço disponível entre eles. Neste caso, o espaço é distribuído igualmente entre os elementos, empurrando-os para o início e o final da coluna.
align-items: center;: Alinha os elementos horizontalmente no centro da coluna. Isso significa que os elementos serão centralizados na largura da coluna.
gap: 32px;: Adiciona um espaço de 32 pixels entre os elementos. Isso cria um espaçamento visual entre os links.
Você sempre pode comparar o seu código com o da aula para ver onde errou ou rever onde teve dúvidas.
Um abraço e bons estudos.