Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

funcionamento space-between

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Estilos de texto e fontes e atividade Alinhando o conteúdo

por Guilherme Borges Moledo
| 242.3k xp | 6 posts

não sei por que a passagem utilizando space-between demonstrada na video aula não funcionou, para ter o resultado parecido precisei utilizar outro metodo em meu codigo porem foi muito mais coisa escrita, alguem sabe por que o space-between não funcionou? html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="portifolioStyle.css">
    <title> Portifolio html 01</title>
</head>
<body>
    <header></header>
    <main class="apresentacao">
        <section>
            <h1>
            Estudo de Portifolio em  <strong>html e css!</strong>
            </h1>
            <p>   
            Olá! Sou <span>Guilherme Borges</span>, desenvolvedor Back-end com foco em JavaScript e Node.js, noções de HTML e CSS.
            </p>
            <a class="linkLinke" href="https://www.linkedin.com/in/guilherme-borges-moledo-a9144715b/">
            Linkedin
            </a>
            <br>
            <a class="linkGit" href="https://github.com/I3org">
            Git Hub
            </a>
        </section>
        <div class="imagem-container">
            <img src="1_BPSx-c--z6r7tY29L19ukQ.png" alt="imagem ilustrativa JavaScript">
        </div>
        </main>
    <footer></footer>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background-color: #000000;
    color: #F6F6F6;
    background-color: gray;
    color: #FFC94A;
}

.linkLinke{
    color: #e6e6e6;  
}

.linkGit{
    color: #000000;  
}

.apresentacao {
    display: flex;
    align-items: center;
    margin-top: 20px; /* Adicione margem superior */
    margin-bottom: 20px; /* Adicione margem inferior */
}

.imagem-container {
    margin: 0 10%; /* Margem de 5% da largura do contêiner pai */
}



/* 
span{
    color: #4839ca;
    border: 1px solid #4839ca;
    padding: 10px;
} */
1 resposta
solução!
por RODRIGO SILVA HARDER
| 2302.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Guilherme, tudo bem?

Primeiramente, a propriedade justify-content: space-between no Flexbox distribui o espaço entre os elementos filhos de forma que o primeiro elemento fique alinhado ao início do contêiner e o último ao final, com espaço igual entre os elementos intermediários. No seu caso, como você tem apenas dois elementos dentro do .apresentacao (a <section> e a <div class="imagem-container">), o space-between vai colocar um no início e outro no final do contêiner, o que pode fazer parecer que eles estão "grudados" nas bordas.

Uma opção que você pode adotar é manter a propriedade justify-content:space-between e adicionar um gap no valor de 100px para aumentar o espaçamento entre os elementos de texto e imagem e remover as propriedades aplicadas na classe .imagem-container.

Ficaria assim:

.apresentacao {
    margin: 10%;
    display: flex;
    align-items: center;
    justify-content:space-around;
    gap:100px;
}

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!