IOS React Native FlexBox详解及实例

2020-01-18 17:08:26于海丽

总结以上的示例,可以看出,不管是否设置子项目的宽度,flex都会忽略宽度,按照上面的公式进行缩放,

如果我们设置了高度,那么 flex 会遵循我们所设置的高度,不去进行拉伸,反之将会对高度进行拉伸

根据 flex 的特性,如果没有设置 View 的尺寸情况下,使用 flex 也可以让 View 占满整个屏幕

container: { backgroundColor:'blue', flex:1 },

alignSelf(允许单个项目有与其它项目不一样的对齐方式,可覆盖 align-items属性)auto(默认):继承父元素的alignItems属性,如果没有则切换为stretch
subViewStyle2: { backgroundColor:'yellow', height:60, width:60, alignSelf:'auto' },

效果:
React,Native之FlexBox,Native,FlexBox详解,FlexBox实例

flex-start:项目从侧轴的起点开始
subViewStyle2: { backgroundColor:'yellow', height:60, width:60, alignSelf:'flex-start' },

效果:
React,Native之FlexBox,Native,FlexBox详解,FlexBox实例

flex-end:项目从侧轴的终点开始
subViewStyle2: { backgroundColor:'yellow', height:60, width:60, alignSelf:'flex-end' },

效果:
React,Native之FlexBox,Native,FlexBox详解,FlexBox实例

center:项目以侧轴的中心为参照
subViewStyle2: { backgroundColor:'yellow', height:60, width:60, alignSelf:'center' },

效果:
React,Native之FlexBox,Native,FlexBox详解,FlexBox实例

stretch
subViewStyle2: { backgroundColor:'yellow', height:60, width:60, alignSelf:'stretch' },

效果:
React,Native之FlexBox,Native,FlexBox详解,FlexBox实例

我们 FlexBox 的使用就先简单介绍到这里,在后续的文章中,会在实际的开发场景中带大家更多更细致地讲解 FlexBox,如果你觉得哪里写得不好或者有误,麻烦留言或者用邮箱的方式联系我,当然遇到问题也可以,最后如果喜欢我的文章,还请点个赞并关注,读者的肯定是对我们笔者最大的鼓励,谢谢!

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!


注:相关教程知识阅读请移步到IOS开发频道。