DEV Community

Cristian Fernando
Cristian Fernando

Posted on • Updated on

 

Flexbox: flex-grow, flex-shrink y flex-basis 馃帹

脥ndice

  1. Introducci贸n
  2. El shorthand flex
  3. flex-grow para rellenar el espacio sobrante
  4. flex-shrink para rellenar el espacio faltante
  5. flex-basis para establecer el ancho base de los items
  6. Conclusiones
  7. Referencias

1. Introducci贸n

Flexbox ya es un est谩ndar al momento de posicionar elementos y maquetar nuestras app y p谩ginas web, como bien sabes existen propiedades flex que se pueden aplicar a nuestro flex-container como bien hay otras que se aplican a los flex-items.

Desde hace alg煤n tiempo me ten铆a muy confundido el uso del shorthand flex, gracias a esa duda este peque帽o post existe.

2. El shorthand flex

La propiedad flex nos sirve para escribir 3 propiedades propias de los flex-item en una sola l铆nea.

img

3. flex-grow para rellenar el espacio sobrante

  • Se aplica a un flex-item.
  • Acepta valores enteros escalares sin unidad de medida.
  • Valor por defecto: 0.

flex-grow permite repartir el espacio sobrante de un flex-container entre todos los flex-items.
Un hack 煤til para calcular cu谩nto crecer谩n los flex-items ser铆a:

x=EspacioSobrante/grow x = EspacioSobrante / \sum grow

Donde:
x es el espacio que se debe adicionar a cada flex-item por unidad de grow que haya en la regla css.

Imagina un escenario como el siguiente:

img

Tenemos 5 flex-items de 100px x 100px donde el flex-container tiene un ancho de 700px, entonces nos sobran 200px para poder repartir como queramos. Ac谩 entra flex-grow al rescate.

En el c贸digo siguiente vemos a flex-grow en acci贸n.

Cada flex-item tiene la propiedad flex-grow con sus respectivos valores. Ahora apliquemos nuestro hack 馃槑

x=200px/8=25px x = 200px/8 = 25px

La sumatoria de los flex-grow es 8 por que adicionamos todos los valores de todos los flex-items.

Por cada unidad de flex-grow debemos adicionar 25px, de esta manera sabremos cual es el nuevo ancho de todos los flex-items.

Podemos resumir la operaci贸n en la siguiente tabla:

items flex-grow adicci贸n TOTAL
item-1 1 25px 125px
item-2 2 50px 150px
item-3 1 25px 125px
item-4 2 50px 150px
item-5 2 50px 150px

img

De esta manera flex-grow sirve para rellenar el espacio sobrante de flex-container entre todos sus flex-items.

4. flex-shrink para rellenar el espacio faltante

  • Se aplica a un flex-item.
  • Acepta valores enteros escalares sin unidad de medida.
  • Valor por defecto: 1.

flex-shrink permite repartir el espacio faltante de un flex-container entre todos los flex-items.
Esta propiedad es la contraria a flex-grow y por eso mismo el funcionamiento es muy similar.

Imagina un escenario como el siguiente:

img

Tenemos 4 flex-items de 250px x 100px donde el flex-container tiene un ancho de 550px, el ancho total de los 4 flex-items es de 1000px pero el contenedor solo es de 550px. 驴Qu茅 ocurre entonces? Por defecto el navegador intentar谩 tratar de acomodar los flex-items dentro del flex-container de una manera proporcional (esto har谩 que cada item ya no mida 250px de ancho como establecimos en el c贸digo), pero 驴que pasa si queremos que algunos flex-items en particular ocupen m谩s o menos espacio? Ac谩 entra en acci贸n flex-shrink 馃

Pese a que en el c贸digo indicamos que el ancho de cada item sea de 250px el navegador recalcula este ancho para que no desborden su contenedor, entonces hace 450px / 4 = 112.5 (entre 4 por que es la cantidad de los items), y restamos 250px - 112.5px = 137.5px, eso medir谩 cada item para el navegador antes de aplicar flex-shrink.

Puedes ver el c贸digo a continuaci贸n:

Se puede usar la misma f贸rmula que vimos con flex-grow pero teniendo en cuenta el espacio que falta, ya no el que sobra:

x=EspacioFaltante/shrink x = EspacioFaltante/ \sum shrink

El contenedor mide 550px y la suma de todos los items es de 1000px, entonces tendr铆amos un d茅ficit de 450px que debemos acomodar.

La suma de flex-shrink de todos los items es de 8.

x=450px/8=56.25px x = 450px/8 = 56.25px

Finalmente debemos restar 56.25px a 250px (ancho original) por unidad de flex-shrink.

Podemos resumir la operaci贸n en la siguiente tabla:

items flex-shrink adicci贸n TOTAL
item-1 2 56.25px*2=112.5px 137.5px
item-2 2 56.25px*2=112.5px 137.5px
item-3 3 56.25px*3=168.75px 81.25px
item-4 1 56.25px 193.75px

Finalmente el ejemplo se ve as铆:
img

5. flex-basis para establecer el ancho base de los items

  • Se aplica a un flex-item.
  • Acepta los mismos valores y unidades que width (px, %, etc.)
  • Valor por defecto: auto. (respeta el width y height si est谩n establecidos)

flex-basis establece el ancho base de un item, si mantenemos el valor en auto respetara el ancho y alto previamente establecidos (si existe), si escribimos un flex-basis con valores espec铆ficos siempre sobre escribir谩 valores de ancho y alto.

Al inicio de este post empezamos hablando de el atajo flex que resume en una l铆nea todas estas propiedades; dejaremos esto para otro post.

Por ahora conocer esto es m谩s que suficiente.

6. Conclusiones

  • flex-grow se usa cuando tenemos espacio de sobra en el flex-container, en otras palabras, cuando 茅l anchos de los items es menor al de su contenedor repartiendo dicho espacio como el programador quiera.
  • flex-shrink reparte el espacio faltante del contenedor entre sus items, en otras palabras, cuando el contenedor es m谩s peque帽o que el anchos de todos sus items.
  • flex-basis establece el ancho base de los items.

7. Referencias


Posiblemente los siguientes art铆culos sean de tu inter茅s:

img

Top comments (0)

12 Rarely Used Javascript APIs You Need

Practical examples of some unique Javascript APIs that beautifully demonstrate a practical use-case.