Índice

1. Introducción
2. flex:1 para repartir el espacio sobrante de manera igualitaria
3. ¿Cuando usar flex-1?
4. flex:auto para repartir el espacio sobrante de manera proporcional
5. ¿Cuando usar flex-auto?
6. Frameworks CSS
7. Conclusiones
8. Referencias

1. Introducción

En el post anterior:

Flexbox: flex-grow, flex-shrink y flex-basis 🎨

Cristian Fernando ・ Mar 28 '22

#spanish #css #webdev #html

se comprendio como funcionan las propiedades flex-grow, flex-shrink y flex-basis. Los devs más experimentados sugieren usar el atajo flex para los desarrollos.

Recordemos los valores por defecto de las propiedades individuales:

/*los items no se expanden si su padre tiene espacio de sobra*/
flex-grow: 0;
/*los items se reducen igualitariamente si no entran en su padre*/
flex-shrink: 1;
/*se respetan los valores width y height (si los tienen)*/
flex-basis: auto;

En la práctica pocas veces veremos estas propiedades escritas una por una en un flex-item, en su gran mayoría nos toparemos con una sintaxis como en la imagen de arriba ☝🏽

Y es posible simplificar aún este atajo como veremos ahora:

2. flex:1 para repartir el espacio sobrante de manera igualitaria

/*flex:1 es una manera breve de escribir:*/
flex-grow:1;
flex-shrink:1;
flex-basis:0;

Todos los items crecen y decrecen de manera igualitaria.

Imaginemos el siguiente caso: tenemos un contenedor de 500px de ancho con 4 hijos de 100px, 125px, 75px, 50px respectivamente. Tenemos 150px de sobra para repartir entre los 4 items y así poder rellenar todo el ancho del container.

.container {
  display:flex;
  border: 1px solid #111;
  width:500px;
  height:200px;
}

.container > div {
  height:100px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.item-1 {
  width:100px;
  background-color:coral;
}

.item-2{
  width:125px;
  background-color:chocolate;
}

.item-3{
  width:75px;
  background-color: violet;
}

.item-4{
  width:50px;
  background-color:orange;
}

3. ¿Cuándo usar flex-1?

• flex-1 es una propiedad para los flex-items.
• Usarlo cuando tenemos espacio sobrante en un flex-container y se desea repartir ese espacio de manera igualitaria entre todos los flex-items.

flex:1 toma el ancho total del contenedor y lo divive entre el número de hijos, por ello cada hijo medirá lo mismo y el contenedor estará lleno. 500px / 4 items = 125px por item

Como podemos ver cuando usamos flex-1 no importa el ancho que definimos en cada item, no importa si tenemos items angostos o anchos, siempre distribuiremos los items de manera igualitaria.

¿Qué ocurre entonces cuando queremos que los items se distribuyan de manera proporcional? Acá entra flex:auto.

4. flex:auto para repartir el espacio sobrante de manera proporcional

/*flex:auto es una manera breve de escribir:*/
flex-grow:1;
flex-shrink:1;
flex-basis:auto;

Todos los items crecen y decrecen de manera proporcional.

Trabajamos nuevamente con el ejemplo anterior:

flex:auto toma el espacio sobrante del contenedor y lo divide entre el número de hijos, por ello cada hijo crecerá proporcionalmente. 150px / 4 items = 37.5px por item

5. ¿Cuándo usar flex-auto?

• flex-auto es una propiedad para los flex-items.
• Usarlo cuando tenemos espacio sobrante en un flex-container y se desea repartir ese espacio de manera proporcional entre todos los flex-items.

6. Frameworks CSS

Marcos como Tailwindcss tiene clases de utilidad listas para ser usadas, como por ejemplo:

Con este post ya podrías usar estas clases de utilidad sin ningun problema.

7. Conclusiones

• flex-1 se calcula dividiendo el ancho total del padre entre la cantidad de los hijos, por ello todos los items crecen y se ven del mismo tamaño.
• flex-auto se calcula dividiendo el espacio sobrante del contenedor entre la cantidad de los hijos, por ello los items crecen proporcionalmente.

8. Referencias

• Learn CSS
• https://www.desarrollolibre.net/blog/css/las-propiedades-flex-grow-flex-shrink-y-flex-basis

Posiblemente los siguientes artículos sean de tu interés:

ES6: Promesas en JavaScript

Cristian Fernando ・ Oct 14 '21

#javascript #webdev #beginners #spanish

Logical Nullish Assignment ??= en JavaScript

Cristian Fernando ・ Mar 5 '22

#javascript #webdev #spanish

Local Storage API en JavaScript 🍂

Cristian Fernando ・ Aug 2 '21

#javascript #html #webdev #spanish