Hello.
I want to make a gallery with no spaces between the images, all of them stick together with no space between them. I'm using display: flex so they are on the same line, then i use a flex: wrap. To make them take all the container space i read about the align-items: stretch property but it´s not working.
This is the HTML
And this is the CSS
This is what i'm seeing. I want those blank spaces to dissapear, all the images need to be together, have the same size.
I want to make a gallery with no spaces between the images, all of them stick together with no space between them. I'm using display: flex so they are on the same line, then i use a flex: wrap. To make them take all the container space i read about the align-items: stretch property but it´s not working.
This is the HTML
HTML:
<body>
<div class="container">
<nav class="navbar">
<a href="/home/home.html">Home</a>
<a href="/pages/galeria.html">Galeria</a>
<a href="/pages/blog.html">Blog</a>
</nav>
</div>
<div class="fotos_galeria">
<div class="imagenes">
<img src="/imagenes/fotos_galeria/imagen2.jpg" alt="">
<img src="/imagenes/fotos_galeria/imagen4.jpg" alt="">
<img src="/imagenes/fotos_galeria/imagen5.jpg" alt="">
<img src="/imagenes/fotos_galeria/imagen6.jpg" alt="">
<img src="/imagenes/fotos_galeria/imagen7.jpg" alt="">
<img src="/imagenes/fotos_galeria/imagen8.jpg" alt="">
</div>
</div>
</body>
</html>And this is the CSS
CSS:
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.container{
display: flex;
justify-content: center;
background-color: black;
padding: 50px;
}
.container a{
margin-top: 10px;
padding: 100px;
color: white;
font-size: 20px;
}
.fotos_galeria{
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
.fotos_galeria img{
width: 30%;
}This is what i'm seeing. I want those blank spaces to dissapear, all the images need to be together, have the same size.
