Diseño con Flexbox

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Un componente puede especificar el diseño de sus hijos mediante el algoritmo Flexbox. Flexbox está diseñado para proporcionar un diseño consistente en diferentes tamaños de pantalla.

Normalmente usarás una combinación de flexDirection, alignItems y justifyContent para lograr el diseño correcto.

precaución

Flexbox funciona igual en React Native que en CSS para web, con algunas excepciones. Los valores predeterminados son diferentes: flexDirection usa column en lugar de row por defecto, alignContent usa flex-start en lugar de stretch, flexShrink usa 0 en lugar de 1, y el parámetro flex solo admite un número único.

Flex

flex define cómo tus elementos "llenarán" el espacio disponible a lo largo del eje principal. El espacio se dividirá según la propiedad flex de cada elemento.

En el siguiente ejemplo, las vistas roja, naranja y verde son hijos del contenedor con flex: 1. La vista roja usa flex: 1, la naranja flex: 2 y la verde flex: 3. 1+2+3 = 6, lo que significa que la vista roja obtendrá 1/6 del espacio, la naranja 2/6 y la verde 3/6.

Dirección Flex (Flex Direction)

flexDirection controla la dirección en que se disponen los hijos de un nodo. Esto se denomina eje principal. El eje cruzado es perpendicular al eje principal, o donde se disponen las líneas cuando hay ajuste.

• column (valor predeterminado) Alinea hijos de arriba a abajo. Con ajuste habilitado, la siguiente línea comienza a la derecha del primer elemento en la parte superior.

• row Alinea hijos de izquierda a derecha. Con ajuste habilitado, la siguiente línea comienza debajo del primer elemento a la izquierda.

• column-reverse Alinea hijos de abajo a arriba. Con ajuste habilitado, la siguiente línea comienza a la derecha del primer elemento en la parte inferior.

• row-reverse Alinea hijos de derecha a izquierda. Con ajuste habilitado, la siguiente línea comienza debajo del primer elemento a la derecha.

Puedes aprender más aquí.

TypeScript

JavaScript

Dirección de Diseño (Layout Direction)

La propiedad direction especifica la dirección para disponer hijos y texto en una jerarquía. También afecta qué borde representan start y end. Por defecto, React Native usa dirección LTR. En este modo start es izquierda y end es derecha.

• LTR (valor predeterminado) Texto e hijos se disponen de izquierda a derecha. Márgenes y relleno aplicados al inicio se aplican al lado izquierdo.

• RTL Texto e hijos se disponen de derecha a izquierda. Márgenes y relleno aplicados al inicio se aplican al lado derecho.

TypeScript

JavaScript

Justificación de Contenido (Justify Content)

justifyContent describe cómo alinear hijos dentro del eje principal de su contenedor. Por ejemplo, puedes usar esta propiedad para centrar un hijo horizontalmente dentro de un contenedor con flexDirection establecido en row o verticalmente dentro de un contenedor con flexDirection establecido en column.

• flex-start (valor predeterminado) Alinea hijos al inicio del eje principal del contenedor.

• flex-end Alinea hijos al final del eje principal del contenedor.

• center Alinea los elementos hijos en el centro del eje principal del contenedor.

• space-between Distribuye uniformemente los elementos hijos a lo largo del eje principal del contenedor, colocando el espacio sobrante entre ellos.

• space-around Distribuye uniformemente los elementos hijos a lo largo del eje principal del contenedor, colocando el espacio sobrante alrededor de cada elemento. Comparado con space-between, al usar space-around se añade espacio antes del primer elemento y después del último.

• space-evenly Distribuye uniformemente los elementos hijos a lo largo del eje principal, manteniendo el mismo espacio entre ellos, entre el primer elemento y el borde inicial, y entre el último elemento y el borde final.

Puedes aprender más aquí.

TypeScript

JavaScript

Alinear Elementos (Align Items)

alignItems define cómo se alinean los elementos hijos a lo largo del eje secundario (cross axis) del contenedor. Es similar a justifyContent pero en lugar de aplicarse al eje principal, alignItems aplica al eje perpendicular.

• stretch (valor predeterminado) Estira los elementos hijos para que coincidan con la height del eje secundario del contenedor.

• flex-start Alinea los elementos hijos al inicio del eje secundario del contenedor.

• flex-end Alinea los elementos hijos al final del eje secundario del contenedor.

• center Alinea los elementos hijos en el centro del eje secundario del contenedor.

• baseline Alinea los elementos hijos según una línea base común. Cada hijo puede establecerse como referencia de base para sus elementos hermanos.

información

Para que stretch tenga efecto, los elementos hijos NO deben tener una dimensión fija en el eje secundario. En el siguiente ejemplo, alignItems: stretch no surte efecto hasta que se elimina width: 50 de los elementos hijos.

Puedes aprender más aquí.

TypeScript

JavaScript

Alineación Individual (Align Self)

alignSelf tiene las mismas opciones y efecto que alignItems, pero en lugar de afectar a los hijos dentro de un contenedor, puedes aplicar esta propiedad a un único hijo para cambiar su alineación dentro de su padre. alignSelf anula cualquier opción establecida por el padre mediante alignItems.

TypeScript

JavaScript

Alinear Contenido (Align Content)

alignContent define cómo se distribuyen las líneas a lo largo del eje secundario cuando hay múltiples líneas (usando flexWrap).

• flex-start (valor predeterminado) Alinea las líneas al inicio del eje secundario del contenedor.

• flex-end Alinea las líneas al final del eje secundario del contenedor.

• stretch (valor predeterminado en Yoga para web) Estira las líneas para que coincidan con la altura del eje secundario del contenedor.

• center Alinea las líneas en el centro del eje secundario del contenedor.

• space-between Distribuye uniformemente las líneas a lo largo del eje secundario, colocando el espacio sobrante entre ellas.

• space-around Distribuye uniformemente las líneas a lo largo del eje secundario, colocando el espacio sobrante alrededor de cada línea. Los bordes del contenedor tienen la mitad de espacio que entre las líneas.

• space-evenly Distribuye uniformemente las líneas a lo largo del eje secundario, colocando el mismo espacio entre ellas, entre la primera línea y el borde inicial, y entre la última línea y el borde final.

Puedes aprender más aquí.

TypeScript

JavaScript

Ajuste de Líneas (Flex Wrap)

La propiedad flexWrap se establece en los contenedores y controla qué sucede cuando los hijos desbordan el tamaño del contenedor a lo largo del eje principal. Por defecto, los hijos se fuerzan en una sola línea (lo que puede encoger elementos). Si se permite el ajuste, los elementos se envuelven en múltiples líneas a lo largo del eje principal cuando sea necesario.

Al envolver líneas, alignContent puede usarse para especificar cómo se colocan las líneas en el contenedor. Aprende más aquí.

TypeScript

JavaScript

Flex Basis, Grow y Shrink

• flexBasis es una forma independiente del eje para proporcionar el tamaño predeterminado de un elemento a lo largo del eje principal. Establecer el flexBasis de un hijo es similar a establecer el width de ese hijo si su padre es un contenedor con flexDirection: row o establecer el height de un hijo si su padre es un contenedor con flexDirection: column. El flexBasis de un elemento es su tamaño predeterminado antes de realizar los cálculos de flexGrow y flexShrink.

• flexGrow describe cuánto espacio dentro de un contenedor debe distribuirse entre sus hijos a lo largo del eje principal. Después de organizar a sus hijos, un contenedor distribuirá cualquier espacio restante según los valores flex grow especificados por sus hijos.

  flexGrow acepta cualquier valor de punto flotante >= 0, siendo 0 el valor predeterminado. Un contenedor distribuirá cualquier espacio restante entre sus hijos ponderado por los valores flexGrow de los hijos.

• flexShrink describe cómo encoger hijos a lo largo del eje principal cuando el tamaño total de los hijos desborda el tamaño del contenedor en el eje principal. flexShrink es muy similar a flexGrow y puede entenderse de la misma manera si cualquier tamaño desbordado se considera espacio restante negativo. Estas dos propiedades funcionan bien juntas permitiendo que los hijos crezcan y encojan según sea necesario.

  flexShrink acepta cualquier valor de punto flotante >= 0, siendo 0 el valor predeterminado (en la web, el predeterminado es 1). Un contenedor encogerá a sus hijos ponderado por los valores flexShrink de los hijos.

Puedes aprender más aquí.

TypeScript

JavaScript

Row Gap, Column Gap y Gap

• rowGap establece el tamaño del espacio (canaleta) entre las filas de un elemento.

• columnGap establece el tamaño del espacio (canaleta) entre las columnas de un elemento.

• gap establece el tamaño del espacio (canaleta) entre filas y columnas. Es una forma abreviada de rowGap y columnGap.

Puedes usar flexWrap y alignContent junto con gap para añadir espaciado consistente entre elementos.

TypeScript

JavaScript

Ancho y Altura

La propiedad width especifica el ancho del área de contenido de un elemento. De manera similar, la propiedad height especifica la altura del área de contenido.

Tanto width como height pueden tomar los siguientes valores:

• auto (valor predeterminado) React Native calcula el ancho/altura del elemento según su contenido, ya sean otros hijos, texto o una imagen.

• pixels Define el ancho/altura en píxeles absolutos. Dependiendo de otros estilos en el componente, esta puede o no ser la dimensión final del nodo.

• percentage Define el ancho o altura como porcentaje del ancho o altura de su padre, respectivamente.

TypeScript

JavaScript

Posición

El tipo position de un elemento define cómo se posiciona relativo a sí mismo, a su padre o a su bloque contenedor.

• relative (valor predeterminado) Por defecto, un elemento se posiciona relativamente. Esto significa que se coloca según el flujo normal del diseño, y luego se desplaza respecto a esa posición basándose en los valores de top, right, bottom y left. Este desplazamiento no afecta la posición de otros elementos hermanos o padres.

• absolute Cuando se posiciona absolutamente, un elemento no participa en el flujo normal del diseño. En su lugar, se coloca independientemente de sus elementos hermanos. La posición se determina mediante los valores top, right, bottom y left, que ubican el elemento respecto a su bloque contenedor.

• static Cuando se posiciona estáticamente, un elemento se ubica según el flujo normal del diseño e ignora los valores top, right, bottom y left. Esta position también evita que el elemento forme un bloque contenedor para descendientes absolutos, a menos que esté presente otra propiedad de estilo (como transform). Esto permite que elementos absolute se posicionen respecto a algo que no sea su padre. Nota: static solo está disponible en la Nueva Arquitectura.

TypeScript

JavaScript

El Bloque Contenedor

El bloque contenedor de un elemento es un ancestro que controla su posición y tamaño. Su funcionamiento en React Native es muy similar a cómo funciona en la web, con simplificaciones por la ausencia de ciertas funcionalidades web.

Los valores top, right, bottom y left de un elemento posicionado absolutamente serán relativos a su bloque contenedor.

Los porcentajes (ej: width: '50%' o padding: '10%') aplicados a elementos posicionados absolutamente se calculan respecto al tamaño de su bloque contenedor. Por ejemplo, si el bloque contenedor mide 100 puntos de ancho, width: 50% hará que el elemento mida 50 puntos de ancho.

Esta lista te ayudará a determinar el bloque contenedor de cualquier elemento:

• Si el elemento tiene un tipo de position relative o static, su bloque contenedor es su padre.

• Si el elemento tiene un tipo de position absolute, su bloque contenedor es el ancestro más cercano que cumpla alguna de estas condiciones:

  • Tiene un tipo de position distinto a static
  • Tiene una propiedad transform

Profundizando

Explora el yoga playground interactivo para comprender mejor flexbox.

Hemos cubierto lo básico, pero existen muchas otras propiedades para diseños. La lista completa de props de diseño está documentada aquí.

También puedes ver ejemplos de Wix Engineers.