-2
<section class="flex">
    <div><img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco</div>

    <div><img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco</div>

    <div><img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco</div>

    <div><img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco</div>

    <div><img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco</div>

    <div><img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco</div>
</section>

css abaixo:

img{
    max-width: 10%;
    display: block;
}

\*css flexbox*\

.flex{
    display: flex;
    flex-wrap: wrap;
    max-width: 880px
    margin: 0 auto;
}

.flex > div {
    flex: 1 1 200px;
    margin: 10px;

Estou tentando alinhar as imagens lado a lado, ficando 3 imagens em cima e 3 embaixo como se fosse uma pagina de uma loja, exibindo produtos

1

2 Respostas 2

1

Basicamente o erro o erro foi falta de atenção na hora de escrever o código o comentário não foi feito da maneira correta

Errado *css flexbox*\

Correto /* css flexbox */

E a falta de um ; depois do max-width: 880px evitou que o próximo estilo margin: 0 auto; carregasse

Ajustando isso seu código estará quase pronto, falta somente ajustar os cálculos o seu box que está agrupando os produtos tem 880px de largura e cada produto tem margin de 10px como vc quer 3 produtos por linha e esse margin é em todos os lado, devemos subtrair 60px de 880px e ai sim dividir por 3

Dessa forma 880-60=820/3=273px

Então ao invés de flex: 1 1 200px; o correto seria flex: 1 1 273px;

img{ max-width: 10%; display: block; }

/*css flexbox*/

.flex{ display: flex; flex-wrap: wrap; max-width: 880px; margin: 0 auto; }

.flex > div { flex: 1 1 200px; margin: 10px; }

Lembrando que é uma boa prática "dar nomes" a suas div's através das classes

0

A melhor forma de fazer isso é você separando as imagens de 3 em 3 dentro de divs, como o demonstrado abaixo:

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column
}

.row1, .row2 {
  display: flex;
  margin: 15px 5px 
}
<section class="flex">
            <div class='row1'>
                <img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco
        
                <img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco
        
                <img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco
            </div>
            <div class='row2'>
                <img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco
        
                <img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco
        
                <img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco
            </div>
        </section>

Como no exemplo é só você centralizar tudo com o justify-content e align-items e setar o flex-direction para coluna que fica do jeito esperado!

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .