Índice
- Introducción
flex:1
para repartir el espacio sobrante de manera igualitaria- ¿Cuando usar
flex-1
? flex:auto
para repartir el espacio sobrante de manera proporcional- ¿Cuando usar
flex-auto
? - Frameworks CSS
- Conclusiones
- Referencias
1. Introducción
En el post anterior:
Flexbox: flex-grow, flex-shrink y flex-basis 🎨
Cristian Fernando ・ Mar 28 '22
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.
Clik para el el código:
.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 losflex-items
. - Usarlo cuando tenemos espacio sobrante en un
flex-container
y se desea repartir ese espacio de manera igualitaria entre todos losflex-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 losflex-items
. - Usarlo cuando tenemos espacio sobrante en un
flex-container
y se desea repartir ese espacio de manera proporcional entre todos losflex-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: