No conozco React Native, ¡pero sí sé flexbox!

Use el siguiente código como guía:

 <div style="display: flex;"> <div> I'll be on the left side </div> <div> I'll be hugging the guy on the left side </div> <div> I'll be hugging the guy hugging the guy on the left side </div> <div style="margin-left: auto;"> I'll be hugging the right side far away from those other guys </div> </div>

El margen establecido en el último elemento secundario empujará a todos los demás elementos secundarios hacia la izquierda tanto como lo permitan sus estilos, y se desplazará hacia la derecha tanto como lo permita cualquier otro estilo.

Puede probar esto agregando también margin-right: auto; al último hijo, y verá al último hijo centrado perfectamente en el espacio restante del div principal, después de que los primeros tres hijos ocupen su espacio asignado. Esto se debe a que los "automóviles de margen" de la competencia compartirán por igual el espacio restante, ya que no pueden cancelarse entre sí y no se anularán entre sí.

El cuadro flexible se diseñó para manejar el espaciado de márgenes como este, así que aprovéchelo, así como las otras opciones de espaciado únicas disponibles en la propiedad justify-content .

Artículo útil: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6

Creo que quieres lograr algo como esto:

Puede implementar esto anidando vistas que compartan la misma propiedad justifyContent .

 <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space-between', }}> <View> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> </View> <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> </View>

Una respuesta parcial: no hay justifySelf en React Native porque no hay justify-self para flexbox en CSS real. Hay una propiedad CSS justify-self , pero no hace nada en los diseños de flexbox. Puede ver en la especificación en https://drafts.csswg.org/css-align-3/#overview que se define justify-self para aplicarse a:

cajas a nivel de bloque, cajas absolutamente posicionadas y elementos de cuadrícula

que en particular no incluye "elementos flexibles".

Bien, pero ¿por qué es este el caso en CSS? MDN ofrece una explicación que puede o no encontrar satisfactoria:

No hay auto-justificación en Flexbox

En el eje principal Flexbox trata nuestro contenido como grupo. Se calcula la cantidad de espacio necesario para colocar los artículos y el espacio sobrante queda disponible para su distribución. La propiedad justify-content controla cómo se usa ese espacio sobrante. Establezca justify-content: flex-end y el espacio adicional se coloca antes de los elementos, justify-content: space-around y se coloca a ambos lados del elemento en esa dimensión, etc.

Esto significa que una propiedad justify-self no tiene sentido en Flexbox, ya que siempre estamos tratando de mover todo el grupo de elementos.

En el eje transversal, align-self tiene sentido, ya que potencialmente tenemos espacio adicional en el contenedor flexible en esa dimensión, en el que un solo elemento se puede mover al principio y al final.

Claramente hay algo de sentido en esto. Siempre es significativo y coherente poner alignSelf: 'center' en un elemento flexible para pedir que se centre en el eje transversal. Pero, ¿qué significaría, por ejemplo, poner justifySelf: 'center' en un elemento flexible, para pedir que se centre en el eje principal? ¿Cómo se supone que debe manejarse si los elementos flexibles anteriores ya han llenado más de la mitad del espacio a lo largo de ese eje?

Los márgenes proporcionan una buena solución para casos como el suyo. justifySelf , por otro lado, no puede existir razonablemente para flexbox, porque los valores de justifyContent especifican cómo distribuir elementos flexibles, y un poco de reflexión sobre lo que significaría aplicarlos a elementos especificados individualmente revela que hacerlo es básicamente incoherente. .