Define como los elementos pueden crecer (grow) para ocupar el espaco disponible, se define como cada elemento
crece en comparacion con los demas
Si un elemento con valor 2 en la propiedad grow: crecera el doble de uno que tenga la propiedad grow:1
cuando se usa en un contenedor flex que tiene una orientación de fila (flex-direction: row, que es el valor
por defecto). Esto significa que, cuando los elementos se colocan en una fila, flex-grow controla cómo esos
elementos crecen para ocupar el espacio horizontal disponible.
Sin embargo, si el contenedor tiene una orientación de columna (flex-direction: column), flex-grow afectará
la altura de los elementos. Es decir, cuando los elementos se organizan verticalmente, flex-grow controla cómo
crecen para ocupar el espacio vertical disponible.
El siguiente es el codigo del ejemplo en HTML, CSS y JavaScript, para flex direction column
Los valores para esta propiedad pueden ser usando flex direction column:
O pueden ser con flex direction row
El siguiente es el codigo del ejemplo en HTML, CSS y JavaScript, para flex direction row
Esta propiedad es similar a flex grow, solo que en vez de controlar el crecimiento en proporcion, esta propiedad
controla el encogimiento o disminucion proporcional, en filas:
El siguiente es el codigo del ejemplo en HTML, CSS y JavaScript, para flex Shrink en Columnas (column)
Puedes notar un comportamiento extraño en cuanto a los ejes de ubicacion ya que row se puede tornar column
y column row, esto se debe a que En Flexbox, las propiedades de alineación dependen de la dirección del contenedor
(flex-direction). Cuando el contenedor está en fila (row), el eje principal es horizontal, por lo que justify-content
alinea los elementos de izquierda a derecha y align-items los alinea verticalmente. En cambio, si el contenedor
está en columna (column), el eje principal se vuelve vertical, y entonces justify-content alinea de arriba a abajo,
mientras que align-items alinea de izquierda a derecha. Este cambio de orientación en los ejes según
flex-direction es lo que hace que las propiedades parezcan "intercambiar" su función.
El manejo de flex shrink en columnas:
o tambien el manejo de flex shrink en filas:
El siguiente es el codigo del ejemplo en HTML, CSS y JavaScript, para flex shrink en filas
