Configuraciones del Flex Container y sus componentes

El Flex Container es uno de los elementos más utilizados en el desarrollo de aplicaciones responsivas con Perspective. Su versatilidad y facilidad de uso lo convierten en una herramienta muy útil, pero al principio puede parecer un poco compleja debido a sus diversas configuraciones y propiedades.

Este texto tiene como objetivo proporcionar una introducción al Flex Container y sus componentes, explicando cómo se distribuyen los elementos dentro del contenedor y cómo se comportan ante cambios de tamaño de pantalla.

Uno de los contenedores que tienen mayor uso en el desarrollo de aplicaciones responsivas en Perspective es el Flex Container, esto por su versatilidad y facilidad de uso, pero es cierto que al inicio puede ser una herramienta poco familiar, ya que tiene 5 diferentes configuraciones cada una con distintos valores que pueden tomar y a los componentes que pongo dentro del container también se le debe de configurar su comportamiento dentro del container ante cambios por lo que de primera mano parece mucho, pero verás que al entenderlo se hace sencillo.


Para entender las propiedades del Flex Container debemos inicialmente entender que sus propiedades lo que afectan es la distribución de los componentes colocados dentro del contenedor, por ejemplo si cambio la propiedad de Justificar (Justify) a centro (center) no voy a ver mi contenedor centrado en mi vista, sino que lo que voy a ver es que los componentes dentro del contenedor se van a justificar al centro del contenedor.

Y si en el ejemplo anterior te preguntaste ¿qué es la propiedad de Justificar? No te preocupes que en este post vamos a explicar su significado y cómo afectan mi aplicación la configuración cada una de las propiedades que podemos escoger para el Flex Container.


Direction / Dirección


La propiedad de Direction o Dirección acomoda los componentes en una fila o columna dentro del contenedor, por ejemplo, si configuro la propiedad en row esta acomoda todos los componentes del contenedor en una única fila y si lo configuro en column esta acomoda los componentes en una única columna.


También está la propiedad reversed, esta gira los componentes para invertir su órden dentro de la fila o la columna, un ejemplo de estas propiedades en acción podemos verlo a continuación:




Wrap / Envoltura


La propiedad Wrap o Envoltura funciona directamente pensando en la adaptabilidad de la aplicación a la pantalla, esta configuración nos permite modificar el comportamiento que tendrán los componentes al momento en que la pantalla se haga más pequeña que su tamaño base, decidiendo si quiero envolver o no los componentes en el contenedor.


Si decido envolver (wrap) los componentes estos se moverán a una nueva fila o columna cuando el espacio ya no sea suficiente para contenerlos, pero si decido no envolverlos (no-wrap) estos o reducirán su tamaño o mantendrán su tamaño base y el contenedor creará una barra de desplazamiento para poder ver los componentes que quedan escondidos fuera de la pantalla según configure los componentes.




Y al igual que la propiedad de dirección puedo invertir su órden (reversed) al ser envueltos con la propiedad reversed.


Justify / Justificar


Cuando hablamos de las propiedades de Justify, Align Items y Align Content primero debemos entender contra qué se van a justificar o alinear los componentes, esta referencia para cada propiedad cambia además según la dirección del contenedor por lo que explicaremos cada uno de los valores que pueden tener y mostraremos un ejemplo para ilustrar cómo afectan la distribución de los componentes cada una de estas propiedades.


La propiedad Justify/Justificar funciona igual que en editores de texto como Word, Docs de Google o Libre Office, esta propiedad alinea los bordes del texto con los márgenes, en el caso de Ignition, alinea los bordes de mis componentes con respecto a los márgenes del contenedor, los valores que puedo dar a esta propiedad son los siguientes:


Valor

Referencia Column

Referencia Row

Descripción

Flex-start

Margen superior

Margen izquierdo

Se inicia desde la referencia y se colocan los componentes uno seguido del otro hacia el margen contrario.

Center

Punto medio entre margen superior e inferior

Punto medio entre margen izquierdo y derecho

Dividimos los componentes hacia ambos lados de la referencia sin espacio entre los componentes.

Flex-end

Margen inferior

Margen derecho

Se inicia desde la referencia y a partir de ahí se distribuyen los componentes sin espacio entre ellos hacia el margen contrario.

Space-between

Márgenes superior e inferior

Márgenes derecho e izquierdo

Se coloca a cada margen un componente, luego los componentes restantes los separamos de forma equidistante entre ellos.

Space-around

Márgenes superior e inferior

Márgenes derecho e izquierdo

Igual al space-between sólo que esta vez vamos a dejar un pequeño espacio entre los márgenes y los componentes (cuando exista espacio).

Space-evenly

Márgenes superior e inferior

Márgenes derecho e izquierdo

Tomamos todo el espacio entre los márgenes y dividimos de forma equidistante todos los componentes.


Para ilustrar cómo afecta cada valor un Flex Container Row dejamos el siguiente gif mostrando cada uno de ellos.



Align Items / Alinear Ítems


La propiedad Align Items o Alinear Ítems es similar al justify pero cambian las referencias y cambian también algunas de las propiedades, vamos a verlas a continuación:


Valor

Referencia Column

Referencia Row

Descripción

Flex-start

Margen izquierdo

Margen superior

Colocamos todos los componentes contra la referencia.

Center

Punto medio entre margen izquierdo y derecho

Punto medio entre margen superior e inferior

Colocamos todos los componentes en el punto medio.

Flex-end

Margen derecho

Margen inferior

Colocamos todos los componentes contra el margen.

Stretch

Márgenes izquierdo y derecho

Márgenes superior e inferior

Todos los componentes se estirarán hasta tocar ambos márgenes.

Baseline

Línea base de los componentes y margen izquierdo

Línea base de los componentes y margen superior

Se colocan todos los componentes contra el margen y luego se alinean contra su línea base


Para ilustrar cómo afecta cada valor un Flex Container Row dejamos el siguiente gif mostrando cada uno de ellos.




Toda esta información que acabamos de explicar puede verse fácilmente en el diseñador de Ignition al seleccionar de forma profunda el Flex Container y podremos ver fácilmente mediante íconos mi referencia y cómo se acomodarán los componentes

Y también debemos tomar en cuenta que al invertir (reversed) el orden de la fila o la columna las referencias no cambian pero si cambia el órden de los componentes en la fila o columna.


Align Content / Alinear Contenido


Align Content es una propiedad que únicamente aplica cuando el container está configurado para wrap, este tiene valores muy similares al justify pero cambia en que en vez de acomodar los componentes, acomodamos las filas o columnas de componentes generadas por el wrap, sus valores son los siguientes:


Valor

Referencia Column

Referencia Row

Descripción

Flex-start

Margen izquierdo

Margen superior

Se inicia desde la referencia y se colocan las filas/columnas una seguida de la otra hacia el margen contrario.

Center

Punto medio entre margen derecho e izquierdo

Punto medio entre margen superior e inferior

Dividimos las filas/columnas hacia ambos lados de la referencia sin espacio entre ellas.

Flex-end

Margen derecho

Margen inferior

Se inicia desde la referencia y se colocan las filas/columnas una seguida de la otra hacia el margen contrario.

Space-between

Márgenes derecho e izquierdo

Márgenes superior e inferior

Se coloca a cada margen una fila/columna de contenido, luego las restantes las separamos de forma equidistante entre ellas.

Space-around

Márgenes derecho e izquierdo

Márgenes superior e inferior

Similar al space-between sólo que esta vez vamos a dejar un pequeño espacio entre los márgenes y las filas/columnas (cuando exista espacio).

Stretch

Márgenes derecho e izquierdo

Márgenes superior e inferior

Tomamos todo el espacio entre los márgenes y dividimos de forma equidistante todas las filas/columnas estirando los componentes para rellenar el espacio entre los márgenes..

Toda esta información que acabamos de explicar puede verse fácilmente en el diseñador de Ignition al seleccionar de forma profunda el Flex Container y podremos ver fácilmente mediante íconos mi referencia y cómo se acomodarán los componentes.

Y también debemos tomar en cuenta que al invertir (reversed) el orden de la fila o la columna las referencias no cambian pero si cambia el órden de los componentes en la fila o columna.

Propiedades de los componentes dentro de los Flex containers


Hemos hablado sobre las propiedades que pueden tener nuestros Flex Containers, pero los componentes dentro del Flex Container también pueden ser configurados para ajustar su comportamiento ante los cambios de tamaño de este contenedor.


Las propiedades que nuestros componentes ganan al estar dentro de un Flex Container son Grow, Shrink y Basis y explicaremos a continuación cada una de ellas.


Grow / Crecer


Grow / Crecer es la propiedad que permite crecer a nuestros componentes en la dirección del contenedor como sea necesario pero relativo a la configuración de los otros componentes dentro del contenedor.


Esta propiedad puede tener un valor numérico positivo e igual a cero donde cero indica que el componente no crecerá con el contenedor, pero cualquier otro número indica que si crecerá.


Los valores que se den a cada uno de los componentes tienen peso al ser comparados con otros por lo que un componente con un valor de 2 crecerá más que un componente con un valor de 1, o si dos o más componentes tienen el mismo valor estos crecerán en la misma proporción.


En el siguiente gif mostramos 4 casos, uno donde grow es igual a 0 para todos los componentes, otro donde es igual a 1 y otros dos donde colocamos valores de forma ascendente y descendente en los componentes.




Shrink / Encoger


Esta propiedad funciona igual que Grow pero en vez de crecer los componentes esta los encogerá.


Nuevamente mostramos un gif con 4 casos, uno donde shrink es igual a 0 para todos los componentes, otro donde es igual a 1 y otros dos donde colocamos valores de forma ascendente y descendente en los componentes.




Basis / Base

Por último tenemos la propiedad Basis o Base esta propiedad indica el tamaño base que tendrá el componente antes de aplicar los valores de Grow o Shrink. Este tamaño base corresponde a el ancho cuando la dirección del container es row y corresponde al alto cuando la dirección del container es column.


Para esta propiedad preparamos dos gifs, uno donde los componentes tiene un Grow de 1 y un Shrink de 0 y cambiamos la base de los componentes entre 3 distintos valores, y otro donde los componentes tienen un Shink de 1 y un Grow de 0 en donde también cambiamos su base para ver su comportamiento.



Con esto terminamos nuestro blog post sobre las configuraciones de los Flex Container y sus componentes, esperamos que la información les sirva para llevar sus aplicaciones de Perspective al siguiente nivel y les recordamos que pueden contactarnos ante cualquier duda generando tiquetes de soporte o también pueden utilizar nuestro foro.

en Blog
Cómo Evitar la Sobrecarga de Gestión de Alarmas con Consolidación y Escalamiento