Las propiedades flex-grow, flex-shrink y flex-basis

- Andrés Cruz

Las propiedades flex-grow, flex-shrink y flex-basis

En una entrada anterior hablamos sobre el uso básico de los Flex: Dando los primeros pasos con FlexBox: La caja flexible con CSS3; y se explicó en qué consisten los flex:

Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.

Cosas como emplear la propiedad: display: flex para especificar que un contenedor es "flexible", se explicó el uso de la propiedad flex-direction para alterar el orden de la columna y flex-direction para especificar si los flex se deben mostrar en columnas o filas; entre otras cosas como ejemplos y consideraciones; para más información, consulte en enlace anterior.

En esta entrada emplearemos algunas propiedades que permiten personalizar más el uso de los flex según la situación; ellas son:

Antes de realizar la explicación de cada una de ellas, se presenta un pequeño ejemplo desde el cual podrás alterar algunos valores y ver el comportamiento:

Ejemplo tomado de: Flexbox Tester

Explicando el comportamiento del flex anterior

Una vez visto el comportamiento de los flex sobre un contenedor con un tamaño fijo (es más sencillo y fácil ver el comportamiento que toma los flex cuando su contenedor es de un tamaño fijo) las propiedades especificadas en cada uno de los inputs, expliquemos un poco cada uno de ellas.

La propiedad flex como un todo

Como muchas otras propiedades como margin o padding cuenta con una forma resumida o abreviada desde la cual podemos ahorrarnos varias líneas de código al trabajar con propiedades de la misma naturaleza; los flex también cuentan con dicha forma.

La propiedad flex es una abreviatura para flex-grow, flex-shrink y flex-basis.

En otras palabras; para especificar las anteriores propiedades lo podemos hacer desde:

flex: flex-grow, flex-shrink, flex-basis

La propiedad flex-basis: tamaño básico

Comenzando por la última la cual es la que define el tamaño base (tal como indica su nombre) de los flex, la misma puede venir dada en pixeles porcentajes, etc; esta propiedad indica un punto de partida desde el cual el navegador se guiaría para calcular el tamaño del flex (aunque como dependiendo de las otras propiedades, este tamaño podría variar).

La propiedad flex-grow: tamaño sobrante

Esta propiedad especifica cuánto debe crecer nuestros flexs al rellenar el espacio sobrante; se especifican números; para el siguiente CSS:

.simple{
flex-grow:1
}
.doble{
flex-grow:2
}

Siguiente el ejemplo anterior, el flex con la propiedad doble tendría el doble de espacio disponible del padre que el flex con la clase simple; si quisiéramos que tuviera el triple del espacio disponible se establecería el número a establecer sería 3; en resumen:

unit grow = espacio sobrante/suma de flex-grow

dado el siguiente CSS:

.contenedor { width: 500px; } 
.item-1 { flex-basis: 150px ; flex-grow: 1 } 
.item-2 { flex-basis: 150px ; flex-grow: 2 } 
.item-3 { flex-basis: 150px ; flex-grow: 1 }

Como vemos en el ejemplo anterior, la suma de los flex es menor al tamaño del padre (sobran 50px), en ese escenario el flex de mayor tamaño sería el item-2 siguiendo la fórmula presentada anteriormente quedaría:

unit grow = 50/4 = 12.5

Sería de 12.5px por unidad:

.item-1: 12.5px
.item-2: 25px
.item-3: 12.5px

Dando el tamaño total:

.item-1: 150px + 12.5px = 170.5px
.item-2: 150px + 25px = = 185px
.item-3: 150px + 12.5px = 170.5px

En donde "espacio sobrante" es el espacio sobrante del contenedor y "suma de flex-grow" es la suma de todos los flexs en una columna.

La propiedad flex-shrink: tamaño faltante

Al contrario que la propiedad anterior, con flex-shrink se especifica el comportamiento de los flexs cuando el tamaño del contenedor es menor al de los flex que lo componen; se especifican de igual manera números:

.simple{
flex-shrink:1
}
.doble{
flex-shrink:2
}

La fórmula quedaría igual:

unit shrink = espacio sobrante/suma de flex-shrink

Dado el siguiente CSS:

.contenedor { width: 400px; } 
.item-1 { flex-basis: 150px ; flex-shrink: 1 } 
.item-2 { flex-basis: 150px ; flex-shrink: 2 } 
.item-3 { flex-basis: 150px ; flex-shrink: 1 }

Siguiente el ejemplo anterior, el flex con la propiedad doble se encogería el doble de espacio faltante del padre que el flex con la clase simple; si quisiéramos que tuviera se encogiera el triple del espacio faltante del padre se establecería el número a establecer sería 3; en resumen:

unit shrink = 50/4 = 12.5

Sería de 12.5px por unidad:

.item-1: 12.5px
.item-2: 25px
.item-3: 12.5px

Dando el tamaño total:

.item-1: 150px - 12.5px = 137,5px
.item-2: 150px - 25px = = 124px
.item-3: 150px - 12.5px = 137,5px

Y esto sería todo.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.