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.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
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.