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):
Alinhando ao centro, tenho um problema com os elementos centralizados:
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.
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP