En la octava lección, toca que aprendas a controlar el decrecimiento (en la lección anterior vimos el crecimiento) de los elementos hijo.
Tabla de contenidos
Controlando el decrecimiento de los elementos hijo
En esta ocasión, vas a ver que también puedes determinar como se comportan los items de un contenedor padre al hacerlo más pequeño. Es decir, que proporción de tamaño deben adoptar los elementos al tener un viewport más reducido respecto a sus hermanos.
Para controlar la propiedad de crecimiento tienes la propiedad CSS flex-grow, y la propiedad para determinar el factor de decrecimiento es flex-shrink.
La propiedad flex-shrink tiene exactamente las mismas propiedades que flex-grow, pero gestiona el comportamiento de los elementos hijo cuando haces el espacio más pequeño.
Partiendo del mismo ejemplo que la lección anterior, te enseñaré como se comportan.
Vamos a recordar el código que tenemos; por un lado tenemos el código HTML con 4 elementos hijo.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"> <title>Curso de Flexbox en raulbocache.com</title> <link rel="stylesheet" href="./css/styles.css" type="text/css"> </head> <body> <div class="caja-padre"> <div class="caja-hijo">1</div> <div class="caja-hijo">2</div> <div class="caja-hijo">3</div> <div class="caja-hijo">4</div> </div> </body> </html>
Y ahora los estilos CSS, en el cual, activaremos el factor de crecimiento para que se repartan el espacio disponible por igual.
/* Aplicamos fuente y comportamiento del modelo de caja */
* {
font-family: sans-serif;
box-sizing: border-box;
}
/* Color del fondo */
body {
background-color: #ddd;
}
/* Estilos del contenedor padre */
.caja-padre {
display: flex;
background-color: #fff;
height: 100vh;
}
/* Estilos de los elementos hijo */
.caja-hijo {
padding: 30px;
font-size: 30px;
font-weight: bold;
text-align: center;
color: #fff;
}
/* Estilo de los elementos hijo impares (odd) */
.caja-hijo:nth-child(odd) {
background-color: #4061AE;
flex-grow: 1;
}
/* Estilo de los elementos hijo pares (even) */
.caja-hijo:nth-child(even) {
background-color: #5d77b3;
flex-grow: 1;
}
Ahora, a diferencia de la propiedad flex-grow, para que el navegador sepa como tiene que comportarse al disminuir el viewport, necesita que se le de una referencia de tamaño. Esta referencia se le indica con la propiedad flex-basis que viste en la sexta lección Flexbox, tamaño de los elementos hijo.
Por lo tanto, le daremos un referencia de 200px. Recuerda que la propiedad flex-basis es un tamaño relativo, es decir, no es estricto como lo es la propiedad width. Por lo que si el viewport lo permite, a partir de 200px para arriba lo controlas con flex-grow y si el tamaño del viewport no permite que los 4 elementos (en nuestro caso) tengan 200px, su comportamiento lo controlas con la propiedad flex-shrink.
Si por el motivo que sea, quieres que unos elementos tengan un tamaño menor que otros, porque les quieres dar menos importancia, o el contenido que hay no es tan relevante, estoy hablando cuando el viewport es de pequeño tamaño, es decir, en vista móvil. Tienes que dar un número mayor a su propiedad flex-shrink.
Por ejemplo, si quieres que los elementos impares de nuestro layout, tengan un factor de decrecimiento doble que los pares, les pondremos los siguientes valores:
/* Estilo de los elementos hijo impares (odd) */
.caja-hijo:nth-child(odd) {
background-color: #4061AE;
flex-grow: 1;
flex-shrink: 2;
}
/* Estilo de los elementos hijo pares (even) */
.caja-hijo:nth-child(even) {
background-color: #5d77b3;
flex-grow: 1;
flex-shrink: 1;
}
Este código dará el resultado siguiente:
Unificando las propiedades de tamaño en una sola
Para controlar el tamaño de los elemento hijo, tienes tres propiedades.
- flex-basis (tamaño inicial)
- flex-grow (factor de crecimiento)
- flex-shrink (factor de decrecimiento)
Para unificar estas tres propiedades estrechamente relacionadas, tienes una cuarta propiedad llamada flex que las puede reunir en una sola.
/* Estilo de los elementos hijo impares (odd) */
.caja-hijo:nth-child(odd) {
background-color: #4061AE;
flex: 1 2 200px;
flex-grow: 1;
flex-shrink: 2;
}
/* Estilo de los elementos hijo pares (even) */
.caja-hijo:nth-child(even) {
background-color: #5d77b3;
flex: 1 1 200px;
flex-grow: 1;
flex-shrink: 1;
}
Como puedes ver en el código, la propiedad flex sustituye a las que están tachadas, haciendo exactamente lo mismo y consiguiendo una reducción de líneas y también se consigue tener el código más ordenado.
Nota: el orden de la propiedad flex es muy importante. El primer valor es el valor de flex-grow, el segundo flex-shrink y el último es el valor de flex-basis.
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