Dúvidas FlexBox | HTML e CSS: Classes, posicionamento e Flexbox

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Stephanie Daravina de Sousa

| 43.9k xp | 5 posts

Olá,

Estou com um projeto pessoal para testar meus conhecimentos porém estou com dificuldades em uma parte e gostaria da ajuda de vocês.

Estou utilizando flexbox mas por algum motivo, os itens não ficam lado a lado como eu gostaria. Segue código HTML:

<section class="discografia">
            <div class="discografia__apresentacao"> 
            <ul> 
                <li class="discografia__albuns"> 
                <img src="Assets/TS1.png" alt="Primeiro album" class="album__historia">
                <p class="discografia__albuns__nome">Taylor Swift (2006)</p>    
                </li>
                <li class="discografia__albuns"> 
                    <img src="Assets/Fearless1.jpg" alt="Primeiro album" class="album__historia">
                    <h3 class="discografia__albuns__nome">Fearless (2008)</h3>    
                    </li>
                <li class="discografia__albuns"> 
                    <img src="Assets/SN1.png" alt="Primeiro album" class="album__historia">
                    <h3 class="discografia__albuns__nome">Speak Now (2010)</h3>    
                    </li>    
                <li class="discografia__albuns"> 
                    <img src="Assets/red1.png" alt="Primeiro album" class="album__historia">
                    <h3 class="discografia__albuns__nome">Red (2012)</h3>    
                    </li>
                <li class="discografia__albuns"> 
                    <img src="Assets/1989_1.png" alt="Primeiro album" class="album__historia">
                    <h3 class="discografia__albuns__nome">1989 (2014)</h3>    
                    </li>    
                <li class="discografia__albuns"> 
                    <img src="Assets/Rep.png" alt="Primeiro album" class="album__historia">
                    <h3 class="discografia__albuns__nome">Reputation (2017)</h3>    
                    </li> 
                <li class="discografia__albuns"> 
                    <img src="Assets/lover-taylor.png" alt="Primeiro album" class="album__historia">
                    <h3 class="discografia__albuns__nome">Lover (2019)</h3>    
                    </li>
                <li class="discografia__albuns"> 
                    <img src="Assets/1989_1.png" alt="Primeiro album" class="album__historia">
                    <h3 class="discografia__albuns__nome">1989 (2014)</h3>    
                    </li>
                <li class="discografia__albuns"> 
                    <img src="Assets/Taylor_Swift_-_Folklore.png" alt="Primeiro album" class="album__historia">
                    <h3 class="discografia__albuns__nome">Folklore (2020)</h3>    
                    </li>           
                <li class="discografia__albuns"> 
                    <img src="Assets/Evermore_-_Taylor_Swift.png" alt="Primeiro album" class="album__historia">
                    <h3 class="discografia__albuns__nome">Evermore (2020)</h3>    
                    </li>
                <li class="discografia__albuns"> 
                    <img src="Assets/Taylor_Swift_-_Midnights.png" alt="Primeiro album" class="album__historia">
                    <h3 class="discografia__albuns__nome">Midnights (2022)</h3>    
                    </li>
                </div>       
            </ul> 
        </section>

CSS:

.discografia {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}

.discografia__apresentacao {
    padding: 2%;
    flex: 1 16%;
}


.album__historia {
    width: 15%;
    height: 10%;
}

.discografia__albuns {
    margin-top: auto;
    padding: 2%;
    justify-content: space-between;
    flex-direction: row;
    list-style-type: none;
    flex: 1;
}

.discografia__titulo {
    font-size: 2.5rem;
    text-decoration: underline;
    align-items: center;
    font-family: "Bebas Neue", sans-serif;
}

.discografia__albuns__nome {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: auto;
    font-family: "Bebas Neue", sans-serif;
}

Pelo live server, está assim:

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

Já tentei mexer em tudo mas fica as colunas. As demais páginas não apresentaram problemas.

Conseguem me ajudar?

2 respostas

solução!

por RODRIGO SILVA HARDER

| 1935.3k xp | 4241 posts

Alura Scuba Team Monitor de Fórum Ops

1 mês atrás

Oi, Stephanie, tudo bem?

Os itens da lista não ficam em uma mesma linha, pois as propriedades são aplicadas aos filhos de um elemento com Flexbox, no caso do seu código, temos a seguinte configuração no HTML:

<section class="discografia">
    <div class="discografia__apresentacao"> 
        <ul> 
            <li class="discografia__albuns"> 
                <img src="Assets/TS1.png" alt="Primeiro album" class="album__historia">
                <p class="discografia__albuns__nome">Taylor Swift (2006)</p>    
            </li>
...RESTANTE DO CÓDIGO

No CSS o display flex, está sendo aplicado na classe discografia que faz parte da tag <section>, portanto as propriedades do flex, não serão aplicadas diretamente nos elementos da lista, mas sim, na <div> que engloba uma <ul> que envolve os elementos da lista (<li>).

Para conseguir ajustar o código e fazer com que os elementos fiquem lado a lado, podemos refatorar o código da seguinte maneira:

HTML

<section>
    <ul class="discografia__apresentacao"> 
        <li class="discografia__albuns"> 
            <img src="Assets/TS1.png" alt="Primeiro album" class="album__historia">
            <p class="discografia__albuns__nome">Taylor Swift (2006)</p>    
        </li>
        ...CÓDIGO OMITIDO
    </ul> 
</section>

CSS

.discografia__apresentacao {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    padding: 2%;
    flex: 1 16%;
}

.album__historia {
    width: 15%;
    height: 10%;
}

.discografia__albuns {
    margin-top: auto;
    padding: 2%;
    justify-content: space-between;
    flex-direction: row;
    list-style-type: none;
    flex: 1;
}

.discografia__titulo {
    font-size: 2.5rem;
    text-decoration: underline;
    align-items: center;
    font-family: "Bebas Neue", sans-serif;
}

.discografia__albuns__nome {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: auto;
    font-family: "Bebas Neue", sans-serif;
}

Perceba que no código HTML acima eu removi a tag <div> e adicionei a classe discografia__apresentacao na tag <ul>. Além disso, removi a classe da tag <section>. No CSS eu transferi as propriedades da classe discografiapara a classe discografia__apresentacao . Dessa forma, os itens que estão envolvidos pela tag <ul>, neste caso os itens da lista, recebem as propriedades do flexbox.

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!

por Stephanie Daravina de Sousa

| 43.9k xp | 5 posts

1 mês atrás

Olá, deu tudo certo.

Muito obrigada.