首页 > 代码库 > React Native 之 Flexbox(弹性盒子布局)
React Native 之 Flexbox(弹性盒子布局)
Flexbox可以在不同屏幕上提供一致的布局结构,一般使用flexDirection、justifyContent、alignItems三个样式来辅助设计。
1.flexDirection:在组件的style中设置可以决定其子组件的主布局(主轴),默认是竖直方向 - 纵轴‘colunm’(从上到下依次排列子组件),另一个是横向 - 横轴‘row’(从左到右依次排列子组件)。
2.justifyContent:决定子组件按照主轴的排列方式
A.flex-start: 从起始 -> 结尾方向开始排列
B.flex-end: 从结尾 -> 起始方向排列
C.center: 从中间 -> 两边排列
D.space-between: 从两边 -> 中间排列
E.space-around: 不知如何描述
3.alignItems:子组件沿着次轴的排列方式(主轴row,次轴colunm)
A.flex-start: 从起始 -> 结尾方向开始排列 (可以这么理解:子组件依次靠近起始方向)
B.flex-end: 从结尾 -> 起始方向排列
C.center: 从中间 -> 两边排列
D.stretch: 充满剩余空间 (这个要和子组件自行设定width、height配合使用)
React Native 之 Flexbox(弹性盒子布局)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。