Entendiendo Flexbox: Distribución Proporcional con flex en React Native

Primero que nada aca te dejo la documentacion oficial de flexbox con reactNative.

Flexbox es una herramienta poderosa para distribuir elementos en pantallas de forma flexible y adaptable. En este artículo, vamos a explorar cómo funciona Flexbox en React Native utilizando el siguiente ejemplo:

import React from 'react';
import { StyleSheet, View } from 'react-native';

export const FlexScreen = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box3} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'gray',
  },
  box1: {
    flex: 1,  // 1/6 del espacio total
    backgroundColor: 'red',
  },
  box2: {
    flex: 2,  // 2/6 = 1/3 del espacio total
    backgroundColor: 'blue',
  },
  box3: {
    flex: 3,  // 3/6 = 1/2 del espacio total
    backgroundColor: 'orange',
  },
});

¿Qué es flex y cómo funciona?

En Flexbox, la propiedad flex no define tamaños fijos en píxeles o porcentajes. En su lugar, establece una proporción relativa del espacio que debe ocupar cada elemento dentro de su contenedor flexible.

• flex: 1: Ocupa 1 unidad proporcional del espacio total.
• flex: 2: Ocupa 2 unidades proporcionales.
• flex: 3: Ocupa 3 unidades proporcionales.

Estos valores se suman para determinar cuántas partes en total hay que distribuir, y cada elemento recibe un tamaño basado en su proporción.

Cómo calcular las proporciones

En este ejemplo:

1. La suma total de las proporciones (flexTotal) es:

   flexTotal = 1 + 2 + 3 = 6

2. La proporción de cada caja se calcula dividiendo su valor de flex entre el total:

   • box1 (roja):

     flexRatio = 1 / 6 ≈ 16.67%

     Ocupa 1/6 del espacio total.

   • box2 (azul):

     flexRatio = 2 / 6 = 1 / 3 ≈ 33.33%

     Ocupa 1/3 del espacio total.

   • box3 (naranja):

     flexRatio = 3 / 6 = 1 / 2 = 50%

     Ocupa 1/2 del espacio total.

Cómo se refleja en la pantalla

Supongamos que el contenedor principal (container) tiene una altura total de 600 px. Esto es cómo se distribuirán las cajas en la pantalla:

• Altura de box1 (roja):

  Altura = 600 px × (1 / 6) = 100 px

• Altura de box2 (azul):

  Altura = 600 px × (2 / 6) = 200 px

• Altura de box3 (naranja):

  Altura = 600 px × (3 / 6) = 300 px

Esto significa que las tres cajas compartirán el espacio disponible en proporciones de 16.67%, 33.33%, y 50% respectivamente.

Simplificación de fracciones

Cuando trabajes con proporciones, es útil simplificar las fracciones para entenderlas mejor:

• 1/6 ya está simplificada.
• 2/6 se reduce a 1/3.
• 3/6 se reduce a 1/2.

La suma de estas proporciones siempre debe ser igual a 1 (es decir, 100% del espacio disponible).

Ventajas de Flexbox

1. Diseño adaptable: Flexbox ajusta dinámicamente el tamaño de los elementos según el espacio disponible en la pantalla.
2. Facilidad para crear proporciones: Usando flex, puedes distribuir espacio entre elementos sin preocuparte por valores absolutos como píxeles.
3. Estilos consistentes: Las proporciones se mantienen uniformes en dispositivos de diferentes tamaños.