Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/09/2015, 19:43
cb17a
 
Fecha de Ingreso: febrero-2012
Ubicación: Aca en la Tierra.
Mensajes: 17
Antigüedad: 12 años, 2 meses
Puntos: 0
Flexbox, es correcto esto?

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
  1.     <div class="caja">
  2.       <div class="caja_izquierda"><img src="cliente.jpg"></div>
  3.       <div class="caja_derecha">
  4.         <div class="titulo">Un titulo</div>
  5.         <div class="datos">
  6.           <div class="dato1">Dato 1</div>
  7.           <div class="dato2">Dato 2</div>
  8.           <div class="dato3">Dato 3</div>
  9.         </div>
  10.       </div>
  11.     </div>
  12.   </body>

Código CSS:
Ver original
  1. .caja {
  2.   width: 90%;
  3.   margin: auto;
  4.   background: #ddd;
  5.   display: flex;
  6. }
  7.  
  8. .caja_izquierda {
  9.   width: 25%;
  10. }
  11.  
  12. img {
  13.   width: 100%;
  14.   height: auto;
  15. }
  16.  
  17. .caja_derecha {
  18.   width: 75%;
  19.   display: flex;
  20.   flex-direction: column;
  21.   justify-content: space-between;
  22. }
  23.  
  24. .titulo {
  25.   background: steelblue;
  26.   font-size: 2em;
  27. }
  28.  
  29. .datos {
  30.   background: teal;
  31.   display: flex;
  32.   justify-content: space-between;
  33. }

Y por qué será que me queda ese pequeño espacio debajo de la imagen?

Agradezco todas las respuestas.