Flexbox - 页面布局

参考文章地址

0.简介

Flexbox: 是一个弹性布局，有主轴与副轴之分，是React Native中主流布局方式

1.常用属性

• flex

• flexDirection

• justifyContent

• alignItems

• flexWrap

• alignSelf

2.属性详解

flex - 权重

参数	说明
正数	等比例分摊空间
零	width与height控制大小
负数	一般不使用

flexDirection - 主轴排序方向

参数	说明	方向
row	子控件水平方向	→
column	子控件竖直方向	↓
row-reverse	子控件水平反向	←
column-reverse	子控件竖直反向	↑

justifyContent - 主轴排列方式

参数	说明
flex-start	子控件对齐主轴起点
flex-end	子控件对齐主轴终点
center	子控件居中对齐主轴
space-between	子控件在主轴方向相邻子控件等间距对齐， 首尾子控件与父容器对齐
space-around	子控件在主轴方向相邻子控件等间距对齐， 首尾子控件与父容器的间距相等且为相邻子控件间距的一半
space-evenly	子控件在主轴方向均匀分布，相邻间距与首尾间距相等

alignItems - 副轴排列方式

参数	说明
flex-start	子控件对齐副轴起点
flex-end	子控件对齐副轴终点
center	子控件居中对齐副轴
stretch	子控件为弹性布局时(未设置副轴方向的大小或者为auto)，拉伸对齐副轴
baseline	有文本存在时， 子控件在副轴方向基于第一个文本基线对齐(View容器底部)

flexWrap - 换行

当空间不足展示不全时可以使用flexWrap属性，它可以支持自动换行展示。

参数	说明
nowrap	不换行
wrap	自动换行

alignSelf - 子控件排序规则

alignSelf属性类似于alignItems，它也是控制副轴上的排列规则，不同的是它使用的对象是子控件自己。它可以改变父容器alignItems的属性控制的子控件排列规则，在副轴上实现自己的排列规则。

参数	说明
flex-start	子控件对齐副轴起点
flex-end	子控件对齐副轴终点
center	子控件居中对齐副轴
stretch	子控件为弹性布局时(未设置副轴方向的大小或者为auto)，拉伸对齐副轴
baseline	有文本存在时， 子控件在副轴方向基于第一个文本基线对齐(View容器底部)

---

2019/01/31