Diseños Flex (y posicionamiento)

    ¿Qué es el diseño Flex?

    El diseño Flex se utiliza para el posicionamiento de componentes, la distribución del espacio entre elementos y el cambio de tamaño. Proporciona potentes capacidades de alineación, distribuye elementos en columnas o filas, y lo ayuda a crear diseños de página receptivos que se adapten fácilmente a cualquier tamaño de pantalla.

    ¿Cómo utilizar el diseño Flex?

    En esencia, el diseño Flex está diseñado para permitir a los desarrolladores especificar fácilmente el tamaño de un contenedor de diseño, definir visibilidades y tamaños de ventana gráfica, y respectivamente reducir o expandir elementos para que se ajusten mejor al espacio disponible.

    Para lograr todo esto, lo primero que debe hacer al utilizar el diseño Flex es dirigirse al contenedor o elemento principal y ajustar el CSS de sus elementos contenedores.

    ¿Cómo crear diseños Flex en App Builder?

    Para utilizar el diseño Flex en App Builder, debe definir un contenedor (al que en el vídeo se hace referencia como lienzo). Tenga en cuenta que su propiedad de visualización está configurada automáticamente en Flex. Vaya a Vistas, añada un nuevo contenedor, elija Diseño Flex de fila o Diseño Flex de columna.

    Ahora puede elegir entre diferentes propiedades de diseño Flex para definir la alineación, el comportamiento predeterminado de cómo se distribuyen los elementos flex, establecer otros valores y más.

    Una de las mayores diferencias entre App Builder y las herramientas de diseño de productos normales son los diseños basados en flex utilizados en la herramienta de diseño a código. Como App Builder se dirige a aplicaciones web, ofrecemos Flex como uno de los enfoques para crear diseños. Está disponible como componente de diseño de fila o columna en la caja de herramientas. El contenedor más externo que ve aquí es el lienzo y tiene configuración de flex ya aplicada. Puede cambiar el tamaño del lienzo editando el tamaño de la ventana gráfica en el panel de propiedades.

    edit-create-canvas-size-Indigo-Design-App-Builder

    Cambiar tamaño del lienzo

    Diseño de fila y columna

    Los contenedores de diseño Flex tienen configuración que nos permite modificar la posición de los elementos de interfaz de usuario anidados. Hay propiedades flex para propiedades h.align y v.align que se pueden aplicar fácilmente desde los respectivos menús desplegables. El lienzo tiene como predeterminado un diseño de fila, alineado horizontalmente hacia la izquierda y estirado verticalmente. Siempre puede cambiar entre diseño de fila y columna independientemente de con cuál haya comenzado. El contenedor de diseño tiene un tamaño basado en el contenido, pero siempre puede especificar una altura y ancho. También puede añadir la propiedad de relleno al contenedor y márgenes para espaciar los elementos secundarios de la interfaz de usuario, lo que se puede hacer después de seleccionar un componente en particular y editar el relleno o margen en el Panel de Propiedades en el lado derecho de la pantalla.

    row-column-layout-Indigo-Design-App-Builder

    Propiedades de diseño

    Siempre puede seleccionar el elemento de interfaz de usuario principal haciendo clic en la etiqueta del elemento secundario. Esto es útil cuando tiene contenedores de diseño anidados. Por otro lado, también puede seleccionar el componente que necesita directamente desde el menú Esquema en la esquina inferior izquierda.

    select-parent-Indigo-Design-App-Builder

    Seleccionar componente principal

    Cambio de tamaño fluido y ajuste

    Las otras propiedades dignas de mención se relacionan con crecer y reducir. Estos afectan el cambio de tamaño de los componentes cuando el tamaño de la ventana gráfica cambia. Configurar un componente en grow expandirá un contenedor en dirección de fila si es diseño de fila o en dirección de columna si es diseño de columna.

    grow-column-row-layout-Indigo-Design-App-Builder

    Opción de diseño de columna/fila de crecimiento

    Añadir a diseño a través del menú contextual

    Si surge la necesidad de añadir un componente existente a un nuevo diseño, hay una opción muy práctica: con clic derecho sobre un componente seleccionado, puede activar el menú contextual y añadir el elemento a un diseño de fila o columna.

    add-to-layout-Indigo-Design-App-Builder

    Añadir componente a diseño a través del menú contextual

    Recursos Adicionales

    Para resumir rápidamente, todo lo que ha aprendido sobre diseños Flex se puede utilizar aquí en el editor tal cual. Para alguien nuevo en Flex y CSS, llevará algo de tiempo acostumbrarse, pero con el tiempo será mucho más fácil pensar en diseños como filas y columnas. Lo más importante es que el diseño Flex nos ayuda a crear aplicaciones que se adapten a un tamaño de pantalla y definir el comportamiento de los componentes dentro del diseño, mientras que el diseño absoluto nos permite tener un diseño particular para solo un tamaño de pantalla.