[Dúvida] Não consigo colocar as imagens alinhadas no mobile | Flexbox: posicione elementos na tela

Solucionado (ver solução)

Solucionado
(ver solução)

5
respostas

Referente ao curso Flexbox: posicione elementos na tela, no capítulo Arrumando os elementos com flex para mobile e atividade Começando responsivo

por Geice Sousa Pinho

| 107.6k xp | 17 posts

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

<main>
    <h4>Celebrando corpos femininos</h4>
    <nav class="nav-conteudoPrincipal">
        <div class="conteinerCoteudoPrincipal">
        <ul class="conteudoPrincipal">
            <li class="conteudoPrincipalImg"><img src="cnfrto.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="cnfrto2.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="corpos dife.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="conj4.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="corpos dife3.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="corpos dife2.webp" alt=""></li>

            <li class="conteudoPrincipalImg"><img src="corpos dife4.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="corpos dife5.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="idades.webp" alt=""></li>

            <li class="conteudoPrincipalImg"><img src="cnfrto5.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="cnfrto7.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="cnfrto3.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="cnfrto6.webp" alt=""></li>

            <li class="conteudoPrincipalImg"><img src="diferentes.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="diferentes2.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="reta gorda.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="preta.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="preta gorda.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="pretasexy.webp" alt=""></li>
            <li class="conteudoPrincipalImg"><img src="prteas.webp" alt=""></li>

        </ul>
        </div>
    </nav>

.conteinerConteudoPrincipal{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .conteudoPrincipal{
        width: 100%;
        flex-flow: column wrap;

    }

5 respostas

por Estudante

| 61.8k xp | 1 posts

07/10/2022

bom dia Geice!, você deve aplicar o display flex para conteudoPrincipal que é o pai dos item conteudoPrincipalImg.

por Waldemar Mazeiga Neto

| 90.9k xp | 3 posts

07/10/2022

Oi amiga, coloca o display: flex no pai das li, que no caso é ul class='conteudoPrincipal'.

por Geice Sousa Pinho

| 107.6k xp | 17 posts

07/10/2022

já fiz isso e não deu certo

solução!

por Geice Sousa Pinho

| 107.6k xp | 17 posts

07/10/2022

Consegui! Mudei o flex-direction para row e coloquei width e height definidos (sem o width 100% tbm funcionou, mas eu deixei pra garantir que utilize 100%). Não ficou exatamente como eu queria pq sobra um espaço vazio em determinados tamanhos de tela, mas as imagens não estão vazando/desalinhadas do restante do conteúdo.

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

 .conteinerConteudoPrincipal{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

    }

    .conteudoPrincipal{
        width: 100%;
        height: auto;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: center;

    }

por Waldemar Mazeiga Neto

| 90.9k xp | 3 posts

08/10/2022

Então, pra não sobrar espaços o ideal era vc pegar e dividir a quantidade dos items por 100, pegar o resultado e definir o tamanho deles com o valor.Ex.: temos 3 imagens e queremos dividi-las dentro de um container(100% / 3 = 33,33), só que nessa caso colocariamos a width = 31,3% e margin = 1%, na soma daria 93,9(somatório da width) + 6%(somatório da margin), resultando em 99,9% o que podemos considerar 100%.