react-native中的flex和flexGrow异同点

react-native中的flex和flexGrow是否表现一致?

在翻看react-native中关于flexBox的文档(文档1,文档2)时,了解到flex这个属性是flexGrow、flexShrink和flexBasis三个属性的缩写,而在React-native中flex只接收一个值,这个值代表的是flexGrow的对应值,至此,我之前一直以为这样的话,在React-native中flex的作用就可以完全等价于flexGrow了,然鹅……在官网给的小例子中做实验练手时,发现……

当父元素剩余空间充足时,flexGrow和flex都会使对应子元素对父元素的剩余空间进行划分

react-native中的flex和flexGrow异同点_第1张图片

react-native中的flex和flexGrow异同点_第2张图片


当父元素剩余空间不足时,flex即使设置了值,子元素的大小依然被限定在父元素空间内;而flexGrow会使子元素超越父元素的空间而维持子元素的本来大小。

react-native中的flex和flexGrow异同点_第3张图片react-native中的flex和flexGrow异同点_第4张图片



总的来说,flex只有一个值时并不等同于flexGrow,flex会使子元素的空间大小限定在父元素空间范围内,而flexGrow会使子元素起码维持其本身大小,再根据父元素是否有剩余空间进行空间分配。

为什么会这样?

以上结论终归是总结,并没找到官方的解释,于是乎,翻文档,从facebook的react-native官网文档找到了yoga文档,再翻到了W3的官方文档,终于找到了,看到没……看到没?没看到接着往下翻,你会看到的。

flex只有一个值,且值为整数时,等价于 flex:X, 1, 0  !!这才是最终答案,是根本原因啊,/(ㄒoㄒ)/~~

你可能感兴趣的:(css)