делает, чтобы заставить элемент расти и заполнять доступное пространство внутри его родителя, как это, и, как вы можете видеть, здесь чередуются строки и столбцы, как это часто делает React, он работает отлично:
читал несколько раз, чтобы получитьflex-grow чтобы работать как положено, вам часто нужно установитьflex-grow:1 (или жеflex:1) на родительском элементе, его родителе и т. д., все время вверх.
Когда я изучал flexbox, у меня сложилось впечатление, что он имеет какую-то иерархическую природу.
Но я только что узнал, что всеflow-* свойства не являются иерархическими и применяются только непосредственно к контейнеру и его непосредственным дочерним элементам.
Я думаю, что многие люди, кроме меня, извлекут пользу из четкого объяснения того, как гибкие свойства, особенноflex-grow взаимодействовать с иерархией элементов / компонентов и тем, что вы на самом деле делаете, устанавливая свойство на узлах-предках, чтобы заставить ваш макет работать.
Это может быть большей проблемой в React Native, где flex является основным методом компоновки, а компоновка может включать более глубокое вложение, чем обычно в Интернете.
Связанный фактор, который добавил путаницу в моем случае, был то, как ручное распространениеflex-grow через предков этот путь работал сflex-direction, что особенно в React Native, часто будет чередоваться междуrow а такжеcolumn.