react-native中的flex和flexGrow异同点
来源:互联网 发布:c语言源小程序代码大全 编辑:程序博客网 时间:2024/05/19 20:56
react-native中的flex和flexGrow是否表现一致?
在翻看react-native中关于flexBox的文档(文档1,文档2)时,了解到flex这个属性是flexGrow、flexShrink和flexBasis三个属性的缩写,而在React-native中flex只接收一个值,这个值代表的是flexGrow的对应值,至此,我之前一直以为这样的话,在React-native中flex的作用就可以完全等价于flexGrow了,然鹅……在官网给的小例子中做实验练手时,发现……
当父元素剩余空间充足时,flexGrow和flex都会使对应子元素对父元素的剩余空间进行划分
当父元素剩余空间不足时,flex即使设置了值,子元素的大小依然被限定在父元素空间内;而flexGrow会使子元素超越父元素的空间而维持子元素的本来大小。
总的来说,flex只有一个值时并不等同于flexGrow,flex会使子元素的空间大小限定在父元素空间范围内,而flexGrow会使子元素起码维持其本身大小,再根据父元素是否有剩余空间进行空间分配。
为什么会这样?
以上结论终归是总结,并没找到官方的解释,于是乎,翻文档,从facebook的react-native官网文档找到了yoga文档,再翻到了W3的官方文档,终于找到了,看到没……看到没?没看到接着往下翻,你会看到的。
flex只有一个值,且值为整数时,等价于 flex:X, 1, 0 !!这才是最终答案,是根本原因啊,/(ㄒoㄒ)/~~
阅读全文
0 0
- react-native中的flex和flexGrow异同点
- React Native Flex布局
- react-native flex布局
- React Native 之 Flex
- 一起来点React Native
- react-native的flex布局
- React Native布局之flex
- Hybrid App 和 React Native 开发那点事
- React Native 和iOS Simulator 那点事
- Hybrid App 和 React Native 开发那点事
- React-Native中的布局
- React Native中的事件
- React-Native 中的ListView
- React-Native 中的生命周期
- React-Native中的Text
- Android中的DVM和Java中的JVM的异同点?
- React native和native交互
- React Native-3.React Native中的主要布局属性介绍和练习
- 14个你可能不知道的JavaScript调试技巧
- Android中放大和缩小图片,支持平顺滑动
- SCHEDULER使用详解
- 操作系统简介(笔记一)
- 关于jQuery ajax 状态码status为0,一直返回error
- react-native中的flex和flexGrow异同点
- Android类的XML属性,相关方法及说明
- DataTable 导出Excel
- Apache Storm学习笔记一:创建Storm集群
- DATE_SUB函数计算相对时间
- JAVA实现导出Excel表
- 用冒泡法给四个数据排序
- 牛客网---2016---搜狐扎金花
- 11.8第6节课