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.
Tabla de contenidos
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.
.container{
display: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, por defecto su valor es row, y esto hace que los elementos se posicionen de manera horizontal
- 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”.
Este sería el código:
<!DOCTYPE html>
<html>
<head>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1{
text-align: center;
}
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container .box {
background-color: #f1f1f1;
width: 33.33%;
margin: 80px;
padding: 30px;
text-align: center;
font-size: 16px;
}
</style>
</head>
<body>
<h1>SERVICIOS</h1>
<div class="flex-container">
<div class="box">Service 1 -Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
<div class="box">Service 2 -Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,.</div>
<div class="box">Service 3 - when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
</div>
</body>
</html>