AnswerBun.com

Como alinhar corretamente uma galeria de itens com flexbox?

Stack Overflow em Português Asked by Ivan Ferrer on September 23, 2020

Estou começando a usar CSS flex, e percebi que quando centralizamos um container, parece que os elementos dentro do container parecem ficar centralizados, porém se eu alinho ele para direita, o container perde a centralização:

Alinhado à esquerda (tenho o problema com um espaço grande na direita):
inserir a descrição da imagem aqui

Alinhando ao centro, tenho um problema com os elementos centralizados:

inserir a descrição da imagem aqui

CSS:

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.item {
    max-width: 136px;
    flex: 1 0 136px;
    margin: 0 5px 20px;
}

Este é o exemplo acima.
E não é bem isso que quero.

Usando float, eu ainda conseguia fazer um alinhamento na tela.

One Answer

Utilize um wrapper interno,

.container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.container-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: calc(146px * 3)
}

.item {
  max-width: 136px;
  flex: 1 0 136px;
  margin: 0 5px 20px;
}
<div class="container">
  <div class="container-inner">
    <div class="item">
      <img src="http://placekitten.com/136">
    </div>
    <div class="item">
      <img src="http://placekitten.com/136">
    </div>
    <div class="item">
      <img src="http://placekitten.com/136">
    </div>
    <div class="item">
      <img src="http://placekitten.com/136">
    </div>
  </div>
</div>

#obs: você pode remover o calc do css, foi somente para exibição, o flex fará isso automático

#edit: container alinhado no centro, ainda pode remover o calc do .container-inner irá funcionar do mesmo modo, o conceito continua sendo o mesmo.. espero ter ajudado

Correct answer by ruansenadev on September 23, 2020

Add your own answers!

Related Questions

A conta matematica ta dando errado?? C#

1  Asked on December 16, 2021 by zehous

 

Qual utilidade de declarar uma coluna como Char(0)?

1  Asked on December 16, 2021 by user60252

   

Repetir campos de acordo com o numero do dropdown

3  Asked on December 16, 2021 by fabio-henrique

   

Vue router – problema com links dinamicos

0  Asked on December 16, 2021 by gabriel-porcher

       

Existe algo que compare o tipo do objeto?

1  Asked on December 16, 2021 by qattus

     

Angular múltiplos ngif else passando parametro no template

1  Asked on December 14, 2021 by herick

 

Condição de saída no do-while em código C

1  Asked on December 14, 2021 by steeph

       

Para que serve esse ‘in’ em C#?

1  Asked on December 14, 2021 by cypherpotato

     

Sobrecarga de método é polimorfismo?

1  Asked on December 14, 2021 by douglas-da-dias-silva

       

Não estou conseguindo cadastrar o nome de uma pessoas na minha agenda

2  Asked on December 14, 2021 by rafael-marques

     

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP