Remover espaço entre imagens no Flexbox
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:
Discussão (0)
Carregando comentários...