本文介绍了React Native中Flexbox布局的基本概念和应用场景，详细解析了Flexbox的属性，包括flexDirection、flexWrap、alignItems、justifyContent等，并探讨了屏幕尺寸、定位模式以及Text和Image组件的使用技巧。通过学习，你可以掌握如何使用Flexbox实现响应式布局和元素的精确定位。
1.Flexbox布局学习
css3中引入的布局模型–弹性盒子模型。
使用Flexbox解决的问题：
- 浮动布局
- 不同宽度屏幕的适配
- 宽度自动分配
- 水平垂直居中
Flexbox属性：
图解：
针对容器的：
- flexDirection: row,column 主轴方向
- flexWrap: wrap,nowrap 当一行放不下时，要不要换行显示，wrap一行显示，nowrap多行
- alignItems: 针对cross-axis,子元素整体在容器中的位置，如flex-start默认，flex-end局尾，center居中，stretch占满容器
- justifyContent:针对main-axis,子元素在容器中的位置，如：flexDirection:row,flex-start居左，flex-end居右，space-between平分间距，space-around平分间距并包括左右间距
针对元素属性：
- flex: number, 类似android中的权重weight,对应于flex-grow
- alignSelf:
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
