Revisamos exhaustivamente cada reseña de nuestro espacio con el objetivo de mostrarte siempre información veraz y actualizada.
Solución:
Hay bastante diferencia entre css flexbox y el implementado por Facebook. Muchas cosas en común, pero los valores predeterminados son muy diferentes. Específicamente:
Everything is display: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite.
doblar: attribute solo se usa cuando en el mismo nivel hay pocos componentes con diferentes valores de flexión (flex: 1, flex: 3) significa que el segundo elemento debe ser 3 veces más grande que el primero. doblar attribute es el único compatible (no admite crecimiento/reducción).
Más información: https://github.com/facebook/css-layout
Un comentario a la respuesta de Jarek Potiuk: ‘flex: 1’ hace algo en react-native similar al comportamiento de flex-grow. Incluso si es el único con flex: definido.
Estilos como flexDirection, alignItems, allowContent definen el estilo de los elementos secundarios del elemento. Similar a CSS Display: flex, que también define a los niños.
Por el contrario, flex: x define el elemento en sí.
Por ejemplo, si un componente contenedor tiene flexDirection: ‘row’, alignItems: ‘center’
Y hay 3 hijos:
niño 1 tiene ancho 50
el niño 2 tiene flex 1 (o cualquier otro número, pero 1 es una práctica común)
niño 3 tiene ancho 50
Luego, el componente del medio se ‘estirará’ para que los 3 elementos secundarios llenen todo el ancho del componente principal.
Muchos tutoriales usan flex: 1, como lo hiciste en tu ejemplo. La razón principal es que a veces (dependiendo del elemento, como Estilo de lista por defecto, si no me falla la memoria) el componente no ocupará toda la pantalla/área si no define las dimensiones, como la altura (p. height: '400px'). Doblar: es increíble porque mantiene las cosas receptivas para varios tamaños.
Pero debo señalar que para cualquier componente con sin hermanos, el valor de flex es totalmente arbitrario. Ex. para su componente de nivel superior, podría decir flex: 43254315 y hace lo mismo que flex: 1. Simplemente significa “tomar todo el espacio” (cualquiera que sea “todo” eso).
Por otro lado, si tienes algunos componentes hermanos, entonces el valor de flexión importa mucho. Por ejemplo, si un componente es flex: 2 y otro es flex: 3entonces el primero ocupa 2/5 de la pantalla y el segundo ocupa 3/5 de la pantalla.
En resumen: dependiendo de sus estilos, podría Mira me gusta flex: 1 es lo mismo que display: flex, pero eso es solo por la forma en que lo está usando en su ejemplo. Verás que actúa de manera muy diferente si solo le das algunos hermanos.