Propiedades de Diseño

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 →

información

Puedes encontrar ejemplos más detallados sobre estas propiedades en la página Diseño con Flexbox.

Ejemplo

El siguiente ejemplo muestra cómo diferentes propiedades pueden afectar o dar forma a un diseño en React Native. Puedes probar, por ejemplo, agregar o eliminar cuadrados de la interfaz mientras cambias los valores de la propiedad flexWrap.

TypeScript

JavaScript

---

Referencia

Props

alignContent

alignContent controla cómo se alinean las filas en la dirección transversal, anulando el alignContent del elemento padre.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly')	No

---

alignItems

alignItems alinea los hijos en la dirección transversal. Por ejemplo, si los hijos fluyen verticalmente, alignItems controla cómo se alinean horizontalmente. Funciona como align-items en CSS (valor predeterminado: stretch).

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')	No

---

alignSelf

alignSelf controla cómo un hijo se alinea en la dirección transversal, anulando el alignItems del padre. Funciona como align-self en CSS (valor predeterminado: auto).

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')	No

---

aspectRatio

La relación de aspecto controla el tamaño de la dimensión no definida de un nodo.

• En un nodo con ancho/alto definido, la relación de aspecto controla el tamaño de la dimensión no establecida

• En un nodo con una base flexible (flex basis) definida, la relación de aspecto controla el tamaño del nodo en el eje transversal si no está definido

• En un nodo con función de medida, la relación de aspecto funciona como si la función midiera la base flexible

• En un nodo con crecimiento/reducción flexible (flex grow/shrink), la relación de aspecto controla el tamaño del nodo en el eje transversal si no está definido

• La relación de aspecto considera las dimensiones mínimas/máximas

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

borderBottomWidth

borderBottomWidth funciona como border-bottom-width en CSS.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number	No

---

borderEndWidth

Cuando la dirección es ltr, borderEndWidth equivale a borderRightWidth. Cuando la dirección es rtl, borderEndWidth equivale a borderLeftWidth.

Type	Required
number	No

---

borderLeftWidth

borderLeftWidth funciona como border-left-width en CSS.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number	No

---

borderRightWidth

borderRightWidth funciona como border-right-width en CSS.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number	No

---

borderStartWidth

Cuando la dirección es ltr, borderStartWidth equivale a borderLeftWidth. Cuando la dirección es rtl, borderStartWidth equivale a borderRightWidth.

Type	Required
number	No

---

borderTopWidth

borderTopWidth funciona como border-top-width en CSS.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number	No

---

borderWidth

borderWidth funciona como border-width en CSS.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number	No

---

bottom

bottom es el número de píxeles lógicos para desplazar el borde inferior de este componente.

Funciona de manera similar a bottom en CSS, pero en React Native debes usar puntos o porcentajes. No se admiten unidades como ems u otras.

Consulta la referencia de CSS en MDN para más detalles sobre cómo bottom afecta el diseño.

Type	Required
number, string	No

---

boxSizing

boxSizing define cómo se calculan las diversas propiedades de dimensionamiento (width, height, minWidth, minHeight, etc.). Si boxSizing es border-box, estos tamaños se aplican al borde del elemento. Si es content-box, se aplican al contenido del elemento. El valor predeterminado es border-box. La documentación web es una buena fuente si deseas aprender más sobre cómo funciona esta propiedad.

Type	Required
enum('border-box', 'content-box')	No

---

columnGap

columnGap funciona como column-gap en CSS. Solo se admiten unidades de píxeles en React Native.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number	No

---

direction

direction especifica el flujo direccional de la interfaz de usuario. El valor predeterminado es inherit, excepto para el nodo raíz que tendrá un valor basado en la configuración regional actual.

Consulta la documentación de Yoga para más detalles.

Type	Required
enum('inherit', 'ltr', 'rtl')	No

---

display

display establece el tipo de visualización de este componente.

Funciona de manera similar a display en CSS, pero solo admite los valores 'flex', 'none' y 'contents'. El valor predeterminado es flex.

Type	Required
enum('none', 'flex', 'contents')	No

---

end

Cuando la dirección es ltr, end equivale a right. Cuando la dirección es rtl, end equivale a left.

Este estilo tiene prioridad sobre los estilos left y right.

Type	Required
number, string	No

---

flex

En React Native, flex no funciona igual que en CSS. flex es un número en lugar de una cadena, y opera según el motor de diseño Yoga.

Cuando flex es un número positivo, hace que el componente sea flexible y se dimensionará proporcionalmente a su valor flex. Así, un componente con flex establecido en 2 ocupará el doble de espacio que un componente con flex establecido en 1. flex: <positive number> equivale a flexGrow: <positive number>, flexShrink: 1, flexBasis: 0.

Cuando flex es 0, el componente se dimensiona según width y height, y es inflexible.

Cuando flex es -1, el componente normalmente se dimensiona según width y height. Sin embargo, si no hay suficiente espacio, el componente se reducirá a su minWidth y minHeight.

flexGrow, flexShrink y flexBasis funcionan igual que en CSS.

Type	Required
number	No

---

flexBasis

flexBasis es una forma independiente del eje de proporcionar el tamaño predeterminado de un elemento a lo largo del eje principal. Establecer flexBasis para un hijo es similar a establecer su width si su padre es un contenedor con flexDirection: row, o su height si el padre tiene flexDirection: column. flexBasis es el tamaño inicial del elemento antes de calcular flexGrow y flexShrink.

Type	Required
number, string	No

---

flexDirection

flexDirection controla la dirección en la que se disponen los hijos de un contenedor. row va de izquierda a derecha, column de arriba hacia abajo, y probablemente puedas adivinar lo que hacen los otros dos. Funciona como flex-direction en CSS, excepto que el valor predeterminado es column.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
enum('row', 'row-reverse', 'column', 'column-reverse')	No

---

flexGrow

flexGrow define cómo debe distribuirse el espacio disponible dentro de un contenedor entre sus hijos a lo largo del eje principal. Después de colocar sus hijos, el contenedor distribuirá cualquier espacio restante según los valores flex grow especificados por sus hijos.

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

Type	Required
number	No

---

flexShrink

flexShrink define cómo deben contraerse los hijos a lo largo del eje principal cuando el tamaño total de los hijos excede el tamaño del contenedor. flexShrink es muy similar a flexGrow y puede entenderse de manera análoga considerando que el espacio desbordado es espacio negativo restante. Estas dos propiedades funcionan bien juntas al permitir que los hijos crezcan y se contraigan según sea necesario.

flexShrink acepta cualquier valor decimal >= 0, siendo 0 el valor predeterminado. Un contenedor contraerá sus hijos ponderado por los valores flexShrink de cada hijo.

Type	Required
number	No

---

flexWrap

flexWrap controla si los hijos pueden envolverse (wrap) al llegar al final de un contenedor flexible. Funciona como flex-wrap en CSS (valor predeterminado: nowrap).

Ten en cuenta que ya no funciona con alignItems: stretch (el valor predeterminado), por lo que quizás quieras usar alignItems: flex-start, por ejemplo (detalles del cambio incompatible: https://github.com/facebook/react-native/releases/tag/v0.28.0).

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
enum('wrap', 'nowrap', 'wrap-reverse')	No

---

gap

gap funciona como gap en CSS. En React Native solo se admiten unidades en píxeles.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number	No

---

height

height establece la altura de este componente.

Funciona de manera similar a height en CSS, pero en React Native debes usar puntos o porcentajes. No se admiten unidades como ems u otras.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

inset

nota

inset solo está disponible en la Nueva Arquitectura

Establecer inset tiene el mismo efecto que establecer cada una de las props top, bottom, right y left.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

insetBlock

nota

insetBlock solo está disponible en la Nueva Arquitectura

Equivale a top y bottom.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

insetBlockEnd

nota

insetBlockEnd solo está disponible en la Nueva Arquitectura

Equivale a bottom.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

insetBlockStart

nota

insetBlockStart solo está disponible en la Nueva Arquitectura

Equivale a top.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

insetInline

nota

insetInline solo está disponible en la Nueva Arquitectura

Equivale a right y left.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

insetInlineEnd

nota

insetInlineEnd solo está disponible en la Nueva Arquitectura

Cuando la dirección es ltr, insetInlineEnd equivale a right. Cuando la dirección es rtl, insetInlineEnd equivale a left.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

insetInlineStart

nota

insetInlineStart solo está disponible en la Nueva Arquitectura

Cuando la dirección es ltr, insetInlineStart equivale a left. Cuando la dirección es rtl, insetInlineStart equivale a right.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

isolation

nota

isolation solo está disponible en la Nueva Arquitectura

isolation te permite formar un contexto de apilamiento.

Hay dos valores posibles:

• auto (predeterminado): No realiza ninguna acción.

• isolate: Crea un contexto de apilamiento.

Type	Required
enum('auto', 'isolate')	No

---

justifyContent

justifyContent alinea los hijos en la dirección principal. Por ejemplo, si los hijos fluyen verticalmente, justifyContent controla cómo se alinean verticalmente. Funciona como justify-content en CSS (valor predeterminado: flex-start).

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')	No

---

left

left establece el desplazamiento en píxeles lógicos para el borde izquierdo de este componente.

Funciona de manera similar a left en CSS, pero en React Native debes usar puntos o porcentajes. No se admiten ems ni otras unidades.

Consulta la referencia de CSS en MDN para más detalles sobre cómo left afecta el diseño.

Type	Required
number, string	No

---

margin

Establecer margin tiene el mismo efecto que configurar cada una de las propiedades marginTop, marginLeft, marginBottom y marginRight.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

marginBottom

marginBottom funciona como margin-bottom en CSS. Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

marginBlock

Equivalente a marginVertical.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

marginBlockEnd

Equivalente a marginBottom.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

marginBlockStart

Equivalente a marginTop.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

marginEnd

Cuando la dirección es ltr, marginEnd equivale a marginRight. Cuando la dirección es rtl, marginEnd equivale a marginLeft.

Type	Required
number, string	No

---

marginHorizontal

Establecer marginHorizontal tiene el mismo efecto que configurar tanto marginLeft como marginRight.

Type	Required
number, string	No

---

marginInline

Equivalente a marginHorizontal.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

marginInlineEnd

Cuando la dirección es ltr, marginInlineEnd equivale a marginEnd (es decir, marginRight). Cuando la dirección es rtl, marginInlineEnd equivale a marginEnd (es decir, marginLeft).

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

marginInlineStart

Cuando la dirección es ltr, marginInlineStart equivale a marginStart (es decir, marginLeft). Cuando la dirección es rtl, marginInlineStart equivale a marginStart (es decir, marginRight).

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

marginLeft

marginLeft funciona como margin-left en CSS. Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

marginRight

marginRight funciona como margin-right en CSS.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

marginStart

Cuando la dirección es ltr, marginStart equivale a marginLeft. Cuando la dirección es rtl, marginStart equivale a marginRight.

Type	Required
number, string	No

---

marginTop

marginTop funciona como margin-top en CSS.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

marginVertical

Establecer marginVertical tiene el mismo efecto que configurar tanto marginTop como marginBottom.

Type	Required
number, string	No

---

maxHeight

maxHeight es la altura máxima para este componente, en píxeles lógicos.

Funciona de manera similar a max-height en CSS, pero en React Native debes usar puntos o porcentajes. No se admiten ems ni otras unidades.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

maxWidth

maxWidth es el ancho máximo para este componente, en píxeles lógicos.

Funciona de manera similar a max-width en CSS, pero en React Native debes usar puntos o porcentajes. No se admiten ems ni otras unidades.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

minHeight

minHeight es la altura mínima para este componente, en píxeles lógicos.

Funciona de manera similar a min-height en CSS, pero en React Native debes usar puntos o porcentajes. No se admiten ems ni otras unidades.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

minWidth

minWidth es el ancho mínimo para este componente, en píxeles lógicos.

Funciona de manera similar a min-width en CSS, pero en React Native debes usar puntos o porcentajes. No se admiten ems ni otras unidades.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

overflow

overflow controla cómo se miden y muestran los elementos hijos. overflow: hidden recorta las vistas, mientras que overflow: scroll hace que las vistas se midan independientemente del eje principal de sus padres. Funciona como overflow en CSS (valor predeterminado: visible).

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
enum('visible', 'hidden', 'scroll')	No

---

padding

Establecer padding tiene el mismo efecto que establecer individualmente paddingTop, paddingBottom, paddingLeft y paddingRight.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

paddingBottom

paddingBottom funciona como padding-bottom en CSS.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

paddingBlock

Equivalente a paddingVertical.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

paddingBlockEnd

Equivalente a paddingBottom.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

paddingBlockStart

Equivalente a paddingTop.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

paddingEnd

Cuando la dirección es ltr, paddingEnd equivale a paddingRight. Cuando la dirección es rtl, paddingEnd equivale a paddingLeft.

Type	Required
number, string	No

---

paddingHorizontal

Establecer paddingHorizontal es equivalente a configurar tanto paddingLeft como paddingRight.

Type	Required
number, string	No

---

paddingInline

Equivalente a paddingHorizontal.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

paddingInlineEnd

Cuando la dirección es ltr, paddingInlineEnd equivale a paddingEnd (es decir, paddingRight). Cuando la dirección es rtl, paddingInlineEnd equivale a paddingEnd (es decir, paddingLeft).

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

paddingInlineStart

Cuando la dirección es ltr, paddingInlineStart equivale a paddingStart (es decir, paddingLeft). Cuando la dirección es rtl, paddingInlineStart equivale a paddingStart (es decir, paddingRight).

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

paddingLeft

paddingLeft funciona como padding-left en CSS.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

paddingRight

paddingRight funciona como padding-right en CSS.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

paddingStart

Cuando la dirección es ltr, paddingStart equivale a paddingLeft. Cuando la dirección es rtl, paddingStart equivale a paddingRight.

Type	Required
number, string	No

---

paddingTop

paddingTop funciona como padding-top en CSS.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

paddingVertical

Establecer paddingVertical es equivalente a configurar tanto paddingTop como paddingBottom.

Type	Required
number, string	No

---

position

position en React Native es similar al CSS estándar, pero todo está configurado como relative por defecto.

relative posiciona un elemento según el flujo normal del diseño. Los desplazamientos (top, bottom, left, right) se aplican en relación con este diseño.

absolute saca el elemento del flujo normal del diseño. Los desplazamientos se aplican en relación con su bloque contenedor.

static posiciona un elemento según el flujo normal del diseño. Los desplazamientos no tienen efecto. Los elementos static no forman un bloque contenedor para descendientes absolutos.

Para más información, consulta la documentación de Diseño con Flexbox. También, la documentación de Yoga detalla cómo difiere position entre React Native y CSS.

Type	Required
enum('absolute', 'relative', 'static')	No

---

right

right es el número de píxeles lógicos para desplazar el borde derecho de este componente.

Funciona similar a right en CSS, pero en React Native debes usar puntos o porcentajes. No se admiten ems ni otras unidades.

Consulta la referencia de CSS en MDN para más detalles sobre cómo right afecta el diseño.

Type	Required
number, string	No

---

rowGap

rowGap funciona como row-gap en CSS. En React Native solo se admiten unidades en píxeles.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number	No

---

start

Cuando la dirección es ltr, start equivale a left. Cuando la dirección es rtl, start equivale a right.

Este estilo tiene prioridad sobre los estilos left, right y end.

Type	Required
number, string	No

---

top

top es el número de píxeles lógicos para desplazar el borde superior de este componente.

Funciona de manera similar a top en CSS, pero en React Native debes usar puntos o porcentajes. No se admiten ems ni otras unidades.

Consulta la referencia de CSS en MDN para más detalles sobre cómo top afecta el diseño.

Type	Required
number, string	No

---

width

width establece el ancho de este componente.

Funciona de manera similar a width en CSS, pero en React Native debes usar puntos o porcentajes. No se admiten unidades como ems u otras.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number, string	No

---

zIndex

zIndex controla qué componentes se muestran encima de otros. Normalmente no se usa zIndex. Los componentes se renderizan según su orden en el árbol del documento, por lo que los componentes posteriores se dibujan sobre los anteriores. zIndex puede ser útil en animaciones o interfaces modales personalizadas donde no quieres este comportamiento.

Funciona como la propiedad CSS z-index: los componentes con un zIndex mayor se renderizan encima. Imagina que la dirección z apunta desde el teléfono hacia tus ojos.

En iOS, zIndex puede requerir que las Views sean hermanas entre sí para funcionar correctamente.

Consulta la referencia de CSS en MDN para más detalles.

Type	Required
number	No