Jump to content
aldo silva

Remover espaço entre imagens no Flexbox

Recommended Posts

Estou desenvolvendo uma galeria de imagens. Mas não consigo remover o espaço vertical entre as imagens. Eu certamente estou fazendo algo errado, mas não consigo ver o erro. Preciso de ajuda. Eu tentei usar GRID, mas como as imagens são carregadas dinamicamente, não funcionou muito bem.

 

Este é o código HTML

 

<script>

	$(document).ready(function() {
				
        $.ajax({

            type: "POST",
            url: "load-pics.php?id="+start,
            processData: false,
            contentType: "application/json",
            data: '',
            success: function(r) {            
                r = JSON.parse(r)                       
                for (var i = 0; i < r.length; i++) {					 					
			$('#gallery').append("<img class='item' id='" + r[i].id + "' src='/us/" + r[i].foto + "'>");
                }
                              
                start += 5;
          
            },
            error: function(r) {
                console.log("Something went wrong!");
            }
        })

	});	

</script> 

<style>
 
  
.container {

margin: 0 50px 0 50px;
border: 1px solid #FF0000;
height: 100%;

}

	
.flex { 
	
	display: inline-flex;
    
	flex-direction: column;
	flex-wrap: wrap;
	flex-flow: column wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	align-self: flex-start;	
	
}

.item {

    border: 3px solid #000;
    box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3); 
    max-width: 23vw;
}
</style>

<body>

<div class="container">

	<span id="gallery"> </span> 

</div>

 E este o resultado:


	

flex.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Felper
      É possível fazer uma imagem .png mover-se por uma tela de Canvas (esquerda, direita, cima, baixo)? Poderiam mostrar um exemplo caso seja possível. É que estou tentando fazer um jogo, onde o jogador se move em um labirinto. O jogador seria uma imagem. Agradeço desde já!
    • By joao b silva
      amigos é o seguinte, eu crio um grid dinamicamente com bootstrap, porem a depender do conteúdo as colunas, na mesma linha ficam com tamanhos (height) diferentes, o que não acontece quando utilizamos <table></table>. Como posso resolver isso?
    • By Alessandro Bodão
      Eai pessoal!
       
      Estou trabalhando em um site WordPress do qual foi me passado a versão demo de um tema (Ample).
       
      O problema é o seguinte: Parece não existir nenhum lugar onde eu tenha acesso pra editar todos os textos e conteúdos (Ex: Os textos padrões do tema parecem ser inacessíveis).
       
      Já fucei praticamente todo o wp-admin e os demais painéis e nada... Já tentei baixar o plugin  Elementor pra ver se me facilitava nisso e nada... Já tentei ver se conseguia achar esses conteúdos e editar pelo código das páginas php do tema e nada. Não sei mais o que fazer, por gentileza peço ajuda.
       
      Tema: https://themegrilldemos.com/ample/
      Site: https://onecv.com.br/
       

    • By alexmill466
      estou criando um site onde tem 3 tipos de produtos novidades, sucessos e vips gostaria que aparece-se cada item de cada classe aparecer no seu devido setor sei que preciso colocar id de cadastro mas como faria a referencia? alguém pode me ajudar sou iniciante. 
    • By b2black
      Estou tentando alinhar um menu dentro do header, e dentro do header tem 2 div, qual a ordem de respeito das funções?
       
      <header> <div class="menuwrap"> <div class="menu"> <nav> <ul> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> </ul> </nav> </div> </div> </header>  
      body {margin: 0; padding: 0;} header { display: flex; flex-wrap: wrap; justify-content: space-between; height: 5vh; background: red; } .menuwrap {} .menu {} .menu ul {} .menu li{display: inline-block;}  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.