¿Explicación para establecer "flex: 1" o "flex-grow: 1" en todos los nodos ancestros en diseños flexibles anidados dado que las propiedades de flex no son jerárquicas?

He leído varias veces eso para obtenerflex-grow para trabajar como se espera, a menudo necesita configurarflex-grow:1 (oflex:1) en el elemento primario del elemento, su elemento primario, etc., todo el camino hacia arriba.

Esto me dio la impresión al aprender flexbox de que tenía una naturaleza jerárquica de algún tipo.

Pero acabo de enterarme de que todosflow-* las propiedades no son jerárquicas y se aplican solo directamente a un contenedor y sus elementos secundarios inmediatos.

Creo que muchas personas además de mí se beneficiarán de una explicación clara de cómo las propiedades de flexión, especialmenteflex-grow interactúe con la jerarquía de elementos / componentes y lo que realmente está haciendo al configurar la propiedad en los nodos ancestrales para que su diseño funcione.

Esto puede ser más un problema en React Native, donde flex es el método principal de diseño y el diseño puede implicar un anidamiento más profundo de lo que es común en la web.

Un factor relacionado, que se sumó a la confusión en mi caso, fue cómo propagarse manualmenteflex-grow a través de los antepasados de esta manera trabajó conflex-direction, que especialmente en React Native, a menudo alternará entrerow ycolumn.

Respuestas a la pregunta(1)

Su respuesta a la pregunta