Hola gente, soy nuevo con esto de Flexbox, hice un pequeño codigo y quiero compartirlo para saber si hay otra forma de hacerlo. La idea es que el titulo siempre quede arriba y los datos siempre abajo, con la imagen responsive a la izquierda
Este es mi codigo:
Código HTML:
Ver original <div class="caja_izquierda"><img src="cliente.jpg"></div> <div class="caja_derecha"> <div class="titulo">Un titulo
</div> <div class="dato1">Dato 1
</div> <div class="dato2">Dato 2
</div> <div class="dato3">Dato 3
</div>
Código CSS:
Ver original.caja {
width: 90%;
margin: auto;
background: #ddd;
display: flex;
}
.caja_izquierda {
width: 25%;
}
img {
width: 100%;
height: auto;
}
.caja_derecha {
width: 75%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.titulo {
background: steelblue;
font-size: 2em;
}
.datos {
background: teal;
display: flex;
justify-content: space-between;
}
Y por qué será que me queda ese pequeño espacio debajo de la imagen?
Agradezco todas las respuestas.