Elementos con la misma altura usando flexbox

Si podríamos garantizar que las cajas siempre tendrían la misma cantidad de contenido, nos valdría con asignar una altura fija a las cajas. Pero muchas veces el contenido no es el mismo, por lo que si aplicamos una altura fija y el contenido es mayor que la altura asignada,  el contenido de la caja se mostrará fuera de la misma. Aquí es donde CSS3 Flexbox resulta útil, ya que puede estirar automáticamente los cuadros para que sean tan largos como el cuadro más largo.

 

Valor flex para la propiedad display

Si queremos que un elemento contenedor sea flexible, al igual que que todos sus hijos directos, tenemos que aplicar  la propiedad display con el valor flex.

 

Propiedades flex

Una vez asignada la propiedad display con el valor flex a un elemento, ya podemos utilizar todas las propiedades flex.

El cometido de este post no es explicar flex en su totalidad, sino aplicarlo para un fin concreto que es conseguir elementos con la misma altura según su contenido. De todas maneras hago un pequeño resumen de las propiedades flex y delo un link que lo explica de manera extensa.

  • flex-direction: define el eje principal.
  • justify-content: define cómo los elementos flexibles se colocan en el eje principal.
  • align-items: cómo los elementos flexibles se colocan en el eje secundario.
  • align-self: define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor de align-items.
  • order: especifica el orden.
  • flex-flow: combina las propiedades flex-direction y flex-wrap.

En el blog de Yunbit hay un montón de ejemplos y una explicación extensa

 

Elementos con la misma altura

Y este es el “truco”, para tener elementos con la misma altura adaptándose todos a la altura del que más contenido tenga. Esto resulta muy útil, en secciones típicas como la de “Servicios”.

elemento flex

Este sería el código:

 

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *