4
respostas

[Dúvida] Propriedade afetando classe que não deveria ser afetada

Na aula, a Rafa diz para definirmos a classe apresentacao__links com flex-direction: column;, porém, quando eu faço isso, a formatação do texto acima dos links também sofre alterações.

Antes: Imagem antes da alteração do flow-direction

Depois: Imagem depois da alteração do flow-directionSegue abaixo meu código com a alteração do flow direction:

index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfólio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Ei! Gosta de programação? <strong class="titulo-destaque">Veja meu Portfólio! Vamos estudar juntos!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Victor Sampaio, estudante iniciante de desenvolvimento Front-end com foco em aprender HTML, CSS e JavaScript inicialmente. <span class="destaque-texto">Vamos conversar?</span></p>
            <div class="apresentacao__links">
                <h2>Acesse minhas redes:</h2>
                <a class="apresentacao__links__link" href="https://www.instagram.com/victors1305/" target="_blank" rel="noopener noreferrer">Instagram</a>
                <a class="apresentacao__links__link" href="https://www.linkedin.com/in/victor-sampaio-silva-234893265/" target="_blank" rel="noopener noreferrer">Linkedin</a>
            </div>
        </section>
        <img class="imagem" src="victor.png" alt="Victor Sampaio">
    </main>
    <footer></footer>
</body>
</html

style.css

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    color: #ffffff;
}

.imagem {
    border: 4px solid #22D4FD;
    border-radius: 30px;
}

.titulo-destaque {
    color: #22D4FD;
}

.apresentacao {
    margin: 10% 15%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 200px;
}

.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: 'Krona One', 'sans-serif';
}

.apresentacao__conteudo__texto {
    font-size: 24px;
    font-family: 'Montserrat', 'sans-serif';
}

.destaque-texto {
    color: #22D4FD;
    font-weight: bold;
}

.apresentacao__links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.apresentacao__links__link {
    background-color: #22D4FD;
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    padding: 21.5px 0;
    text-decoration: none;
    color: #000000;
    font-family: 'Montserrat', 'sans-serif';   
    font-weight: 600;
}
4 respostas

Boa noite Victor,

Sim, e está correto esse comportamento, pois quando um elemento "pai", no caso a div.apresentacao__links tem a propriedade de alterar a orientação (fluxo) da ordem dos itens, todos os elementos "filhos" diretos, ou seja, descendentes diretos do seu ancestral (pai), logo terão o comportamento definido de orientação.

No caso, se você desejar que os 2 links (tag ) sofram a alteração desse estilo acima, eles necessitarão de deixarem de serem filhos diretos do ancestral (apresentacao__links), ou seja, se você envolvê-los em uma outra tag e somente nessa você adicionar o display: flex e a propriedade que altera o fluxo de orientação dos itens, assim somente nelas você terá o comportamento de mudança de posicionamento / direção.

HTML

<div class="apresentacao__links">
    <h2>Acesse minhas redes:</h2>
    <div class="exemplo">
        <a class="apresentacao__links__link" href="https://www.instagram.com/victors1305/" target="_blank" rel="noopener noreferrer">Instagram</a>
        <a class="apresentacao__links__link" href="https://www.linkedin.com/in/victor-sampaio-silva-234893265/" target="_blank" rel="noopener noreferrer">Linkedin</a>
    </div>
</div>

STYLE

.exemplo {
    display: flex;
    flex-direction: column;
}

Além disso, na div.apresentacao__links também precisará de ser removida a propriedade de mudança de ordem, para que volte ao posicionamento original.

Olá Aluno, entendi o raciocínio que você desenvolveu, porém acho que não deixei minha dúvida clara o suficiente. Eu quero que os links fiquem como ficaram mesmo, na vertical. Meu problema é o texto acima, o título e o parágrafo estão tendo sua formatação alterada quando eu altero a propriedade em apresentaca__links. Você consegue me ajudar com isso?

Opa Victor,

No caso, você se refere a mudança de formação no título conforme suas imagens, devido ao texto em azul ("Veja meu Portfólio...") estar se deslocando para baixo ao invés de ficar na mesma linha, conforme sua imagem 1 (antes) ?

Caso positivo, é normal ocorrer isso, pois como o seus botões agora estão ocupando um espaço horizontal menor (eixo X), logo o container que envolve elas, no caso a classe que tem o display: flex e flex-direction: column, terá uma largura proporcional ao espaço total usado, no caso menor, pois os botões não estão mais um ao lado do outro e assim, ir ocupar menos espaço mesmo.... Outro ponto também, mesmo deixando os estilos conforme acima, se você remover o width fixo que está na section.class="apresentacao__conteudo" Conforme última imagem abaixo, logo você terá mais espaço sendo disponível.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade es

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Eae victor tudo bem? Vim tentar te ajudar aqui também, você consegue mandar um print da sua tela completa mostrando a foto junto, e você também consegue mandar o tamanho em pixels da sua imagem inspecionando ela tamanho Horizontal e vertical? Estou suspeitando que a sua foto esteja maior que a do layout do exemplo, e por isso está tendo um comportamento diferente, mas ai confirmando isso eu posso ver uma solução para ti