Índice
- Introducción
- El shorthand
flex flex-growpara rellenar el espacio sobranteflex-shrinkpara rellenar el espacio faltanteflex-basispara establecer el ancho base de los items- Conclusiones
- 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.
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:
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:
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 😎
La sumatoria de los
flex-growes8por que adicionamos todos los valores de todos losflex-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 |
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:
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
250pxel navegador recalcula este ancho para que no desborden su contenedor, entonces hace450px / 4 = 112.5(entre 4 por que es la cantidad de los items), y restamos250px - 112.5px = 137.5px, eso medirá cada item para el navegador antes de aplicarflex-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:
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.
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í:
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 elwidthyheightsi 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-growse usa cuando tenemos espacio de sobra en elflex-container, en otras palabras, cuando él anchos de los items es menor al de su contenedor repartiendo dicho espacio como el programador quiera. -
flex-shrinkreparte 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-basisestablece el ancho base de los items.
7. Referencias
- Learn CSS
- Guía completa de flexbox
- https://www.desarrollolibre.net/blog/css/las-propiedades-flex-grow-flex-shrink-y-flex-basis
- https://ed.team/blog/guia-definitiva-de-flexbox-2-flex-basis-flex-frow-flex-shrink
Posiblemente los siguientes artículos sean de tu interés:
Top comments (1)
Buenas Cristian!!
En el CodePen flex-grow, tienes duplicada la linea de border.
codepen.io/dux-soft/pen/MWreMxe
.main{
border:1px solid #000;
height:300px;
width:700px; /sobra 200px para repartir/
border:1px solid black;
display:flex;
flex-flow: row wrap;
}