TransWikia.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!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP