Entrar Ainda não tem acesso?
1
resposta

Alinhamento de itens

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox

por Maria Eduarda Sousa de Oliveira
| 12.5k xp | 1 posts
Aprendiz

Gostaria de saber como alinhar essa imagem mais para a esquerda. Utilizei o space between e gostaria de saber se esse espaço é possível ajustar, ou se é mais indicado utilizar outra propiedade nesse caso.

img {
    box-sizing: border-box;
    max-width: 250px;
        
}

.apresentacao {
    display: flex;
    align-items: center;
    margin: 15%;
    justify-content: space-between;
}

.apresentacao-texto {
    width: 593px;
    height: 357px;
    display: flex;
    flex-direction: column;
    gap: 20px;

}

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

1 resposta
por Renan Lima
| 3813.9k xp | 8077 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Maria!

Para alinhar a imagem mais para a esquerda, você pode ajustar a propriedade justify-content da classe .apresentacao. No momento, você está utilizando justify-content: space-between;, que distribui o espaço igualmente entre os itens, criando um espaço entre eles.

Uma alternativa seria utilizar justify-content: flex-start;, que alinha os itens no início do container. Dessa forma, a imagem ficará mais à esquerda.

Aqui está o código atualizado:

.apresentacao {
    display: flex;
    align-items: center;
    margin: 15%;
    justify-content: flex-start;
}

Ou pode testar alinhar ao centro com o justify-content: center;.

Experimente essa alteração e veja se o resultado atende às suas necessidades. Lembre-se de que você pode ajustar o valor da propriedade margin para obter o espaçamento desejado.

Espero ter ajudado e bons estudos!