En esta séptima clase te voy a mostrar como controlar el crecimiento de tus elementos hijos. Es decir, podrás modificar los elementos en conjunto, o por que no, uno a uno de forma totalmente independiente, y todo eso en función del tamaño del viewport.
Tabla de contenidos
Comportamiento de flex-grow
La propiedad de crecimiento flex-grow de CSS le indica al navegador que parte del pastel se debe quedar del espacio restante dentro de su contenedor padre. Vamos a ilustrarlo con unas imágenes.
Para simplificar, tenemos 4 elementos hijo dentro de un contenedor padre con la propiedad display: flex; y la anchura del contenedor a 500px.
En la situación inicial, los elementos hijo se apilan de izquierda a derecha, es decir, flex-direction: row; y ocupan el ancho de su contenido, en este caso el texto que los enumera. También se debe añadir un padding de 30px + el píxel del borde.
/* Estilos de los elementos hijo */
.caja-hijo {
padding: 30px;
font-size: 30px;
font-weight: bold;
text-align: center;
color: #fff;
border: 1px solid #fff;
}
Si quieres que todos los elementos hijo rellenen el espacio restante del contenedor padre, debes indicarle como quieres que se repartan el espacio sobrante.
Aquí es donde entra la propiedad flex-grow, factor de crecimiento. Decir que los valores que acepta esta propiedad son número naturales positivos y su valor por defecto es 0 (desactivado).
Como es una propiedad que se aplica a los elementos hijo, puedes controlar cada uno de ellos independientemente. Aprovechando que tenemos los elementos pares y impares por separado, haremos un distinción entre ellos.
/* Estilo de los elementos hijo impares (odd) */
.caja-hijo:nth-child(odd) {
background-color: #4061AE;
flex-grow: 1;
}
Recuerda el valor por defecto de la propiedad flex-grow es 0, por lo que los elementos pares tendrán el valor 0 y los elementos impares el valor 1.
¿Cómo crees que se repartirán el espacio sobrante?
Como puedes ver, al dar el valor 1 a los elementos impares y dejar a los elemento pares sin valor (por defecto 0), el espacio sobrante se reparte entre los dos elementos impares.
Ahora bien, si quieres que los elementos pares también se repartan el espacio, debes a éstos dar un número a su propiedad flex-grow para activar el reparto.
Ahora, como todos los elementos tienen un valor 1 en su propiedad flex-grow, se reparten el espacio por igual.
Nota: hay que decir, que si el contenedor padre tiene un valor relativo (%, vw…)en vez de una valor absoluto (px), los elementos hijo se adaptarían siempre al contenido, teniendo en cuenta los tamaños en tablet y mobile.
Diferentes proporciones de crecimiento
Si lo que quieres conseguir es dar diferentes valores de crecimiento en función de algún criterio, simplemente tienes que dar un valor diferente al elemento o elementos hijos. Por ejemplo, que los elementos pares se queden el triple de espacio sobrante que los impares.
Los elementos pares se llevan 3 partes y los impares sólo 1.
Nota: ten en cuenta que esta proporción de 3 y 1 es del espacio sobrante, no de todo el espacio.
Dando proporciones exactas
Si lo que quieres es dar una proporción exacta a cada uno de los elementos hijo, por ejemplo, que los elementos impares tengan exactamente el doble de ancho que los pares, debes dar al contenedor padre una alineación concreta y no definir su ancho.
/* Estilos del contenedor padre */
.caja-padre {
display: flex;
flex-flow: row wrap;
background-color: #fff;
height: 100vh;
width: 500px;
justify-content: space-evenly;
}
Como puedes ver, eliminamos la propiedad de width y asignamos la propiedad justify-content: space-evenly. El resultado es este:
Como no se ha asignado ningún tamaño de elemento hijo, el tamaño es el de su contenido, pero la alineación es equitativa (space-evenly).
Ahora le indicas a los elementos hijo impares una propiedad flex-grow de 2. Y a los elementos pares, un flex-grow de 1. ¿Qué pasará?
¡Pues eso! Exactamente el doble. Si quieres que sea el triple, pones 3 y 1 en sus propiedades flex-grow correspondientes.
Y hasta aquí el artículo de hoy…
Si te ha gustado o te ha aclarado conceptos el contenido de este artículo compártelo en redes sociales para que pueda crecer, ¡Muchas gracias!
Deja una respuesta