Flexbox, es correcto esto?

cb17a · #1 (**permalink**) 24/09/2015, 19:43

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

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.

AngelKrak · #2 (**permalink**) 24/09/2015, 22:07

para lo de la imagen solo agregale un display: flex; a .caja_izquierda y listo no tendras ese espacio que dices ;)

y ese que hicistes con flex si se puede hacer sin flex, con un float left y asignandole width en porcentaje quedaria como esta con flex ;)

Demo:
http://codepen.io/AngelKrak/pen/OyRqjE

cb17a · #3 (**permalink**) 24/09/2015, 22:43

Lo que pasa que con el float los datos quedan pegados al titulo y yo necesito que queden pegados justo abajo. Igual gracias por la respuesta

AngelKrak · #4 (**permalink**) 25/09/2015, 06:55

amigo yo lo veo casi igual .-. cual seria tu problema jajaja xD