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
网友评论