Propiedades clave de Flex Layout en MAUI

El flex layout es la herramienta que necesitas cuando quieres distribuir elementos de forma proporcional, limpia y adaptable al tamaño del dispositivo. Aprenderás cómo funcionan sus propiedades clave (justify content, align items, direction y wrap) y cómo aplicarlas en código real para diseñar interfaces flexibles en .NET MAUI.

Si vienes trabajando con otros layouts, vas a notar que aquí la organización se vuelve más natural: el contenedor se encarga de calcular espacios y alineaciones por ti, sin que tengas que forzar propiedades extra que afecten el rendimiento.

¿Qué es el flex layout y por qué usarlo?

El flex layout es un contenedor que distribuye sus elementos según la proporción del dispositivo y el espacio disponible. Su nombre lo dice todo: es flexible. Eso significa que puedes alinear, organizar y posicionar componentes con un conjunto de propiedades pensadas para que el diseño se adapte solo [0:30].

¿Cuándo conviene usar flex layout? Cuando necesitas que los elementos se distribuyan proporcionalmente, se acomoden a distintos tamaños de pantalla o cambien de dirección sin reescribir tu UI. Es ideal para barras de botones, tarjetas y menús responsivos.

¿Cómo controlar la distribución con justify content?

La propiedad justify content define cómo se organiza el contenido dentro del contenedor. Tiene varios valores y cada uno cambia por completo el resultado visual [1:10].

• start: alinea los componentes de izquierda a derecha, dejando el espacio sobrante a la derecha.
• center: centraliza los elementos, dejando bordes iguales a ambos lados.
• end: posiciona los elementos al final, alineados de derecha a izquierda.
• space around: coloca una unidad de espacio en cada borde y dos unidades entre elementos.
• space between: elimina el espacio en los bordes y reparte el espacio entre elementos por igual.
• space evenly: usa la misma cantidad de espacio entre los elementos y en los bordes.

Esta propiedad te ahorra muchos dolores de cabeza cuando ves un diseño y piensas: "¿cómo logro que esto se reparta solo?". Aquí está la respuesta [2:30].

¿Cómo alinear elementos con align items?

Mientras justify content trabaja sobre el eje principal, align items se encarga de la alineación en el eje contrario dentro del contenedor [3:50].

• start: alinea los elementos desde arriba hacia abajo.
• center: ubica los elementos en el medio vertical de la pantalla.
• end: posiciona los elementos desde abajo hacia arriba.
• stretch: extiende los componentes ocupando el espacio disponible de arriba a abajo.

¿Qué hace stretch en align items? Estira tus componentes para que ocupen todo el alto disponible del contenedor, manteniéndolos alineados de arriba hacia abajo.

¿Cómo definir la dirección de los elementos?

La propiedad direction establece hacia dónde fluyen los elementos dentro del contenedor. Tiene cuatro valores que se agrupan en pares opuestos [5:00].

Row y row reverse

Con row, los elementos se direccionan de izquierda a derecha: example uno, example dos, example tres. Con row reverse, ese orden se invierte: el primer elemento queda al final, el segundo se mantiene al medio y el tercero pasa al inicio. Es el mismo contenido, leído al revés.

Column y column reverse

Con column, los elementos se organizan de arriba hacia abajo. Con column reverse, el flujo va de abajo hacia arriba, invirtiendo las posiciones de la misma forma que ocurre con row reverse [6:20].

Tomar en cuenta cómo cambian las posiciones es clave para no romper la jerarquía visual de tu UI cuando experimentes con estos valores.

¿Para qué sirve la propiedad wrap?

La propiedad wrap decide si los elementos se mantienen en una sola línea o saltan a la siguiente cuando no caben. Tiene tres valores [7:30].

• no wrap: deja todos los controles en una sola línea, aunque queden apretados.
• wrap: divide los elementos en varias líneas según la proporción del dispositivo.
• reverse: aplica el comportamiento de wrap, pero invierte el orden de las filas.

Un detalle importante: el valor reverse se aplica sobre el comportamiento de wrap, no sobre no wrap. Si tienes seis botones distribuidos en dos filas con wrap, al usar reverse la fila inferior pasa arriba y viceversa [8:40].

¿Cuál es la diferencia entre wrap y no wrap? No wrap fuerza todo en una línea; wrap permite que los elementos salten a la siguiente línea cuando se quedan sin espacio horizontal.

¿Cómo aplicar flex layout en código real?

Para practicar, crea una carpeta llamada FlexLayoutSample dentro de tu carpeta Views/layout y agrega un archivo FlexLayoutSample.xaml. El nombre debe ser intuitivo respecto a lo que estás construyendo [10:00].

Dentro del archivo, abre la etiqueta <FlexLayout> y agrega seis botones con distintos backgrounds y el texto "button". Esto te dará suficiente material visual para probar cada propiedad.

xml <FlexLayout Wrap="Wrap" Direction="Row" JustifyContent="SpaceBetween" AlignItems="Center"> <Button Text="button" BackgroundColor="Pink" /> <Button Text="button" BackgroundColor="Green" /> <Button Text="button" BackgroundColor="Blue" /> <Button Text="button" BackgroundColor="Orange" /> <Button Text="button" BackgroundColor="Purple" /> <Button Text="button" BackgroundColor="Yellow" /> </FlexLayout>

Prueba primero wrap: notarás que los botones se autodividen según la dimensión del dispositivo. Cambia a reverse y verás cómo un botón queda arriba y los demás se reordenan abajo [12:00].

Luego experimenta con direction: con column, el botón rosado queda arriba y el verde al final; con column reverse, el orden se invierte verticalmente. Con row reverse, los valores se reorganizan de derecha a izquierda.

Finalmente, juega con justify content usando space between y space around para ver cómo cambian los espacios entre botones y bordes, y con align items en start y center para mover los botones al inicio o al medio del contenedor [14:00].

¿Qué propiedad del flex layout te resultó más útil para los diseños que tienes en mente? Cuéntalo en los comentarios.