Las propiedades flex-grow, flex-shrink y flex-basis
- Andrés Cruz
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:
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.
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.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter