Skip to content

Commit 2fa46cb

Browse files
author
ChasonTang
committed
doc: Add yoga
1 parent 0bffba3 commit 2fa46cb

File tree

1 file changed

+71
-0
lines changed

1 file changed

+71
-0
lines changed

doc/yoga.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
## Yoga 布局
2+
### 布局长度属性转换规则
3+
1. `key: undefined/null`,即为 undefined 类型
4+
2. `key: 123`,即为虚拟像素点类型,即 dp/pt
5+
3. `key: 'auto/100%'`,即为字符串类型,但是必须带 auto 或者 % 后缀,**绝对不能纯数字字符串**
6+
4. 其他全部报错,如 `key: {x: 1}` 这样的字典类型
7+
8+
### 位置
9+
top left bottom right start end 都是 Undefined 默认值,表示不生效,支持 auto,undefined,dp/pt,百分比。**auto 在这里被解释被 undefined**,start/end 根据 RTL 或者 LTR 发生互换
10+
11+
### 宽高
12+
1. width height 默认为 Auto,表示自动撑开,支持 auto,undefined,dp/pt,百分比。
13+
2. min/max 默认都是 Undefined,支持 auto,undefined,dp/pt,百分比。**auto 在这里被解释被 undefined**
14+
15+
### 边框宽度
16+
borderWidth borderTopWidth borderLeftWidth borderBottomWidth borderRightWidth borderStartWidth borderEndWidth 都是 NaN,即 Undefined,**只支持纯数字**
17+
18+
### 外边距
19+
margin marginVertical marginHorizontal marginTop marginLeft marginBottom marginRight marginStart marginEnd 默认都是 Undefined,**支持 undefined,dp/pt,百分比,auto**
20+
21+
### 内边距
22+
padding paddingVertical paddingHorizontal paddingTop paddingLeft paddingBottom paddingRight paddingStart paddingEnd,**基本等同外边距**
23+
24+
## 枚举属性
25+
### flex 主轴方向 flexDirection
26+
和 React Native 一样,默认为竖向 column,**和 CSS 标准不一致**,可选 row,column,row-reverse,column-reverse
27+
28+
### 主轴排列 justifyContent
29+
默认 flex-start,可选 flex-start,center,flex-end,space-between,space-around,space-evenly,**相比 CSS 多出一个 space-evenly**
30+
31+
### 副轴排列 alignItems
32+
默认 stretch,可选 flex-start,center,flex-end,stretch,baseline
33+
34+
### 重载父容器副轴排列 alignSelf
35+
默认 auto,相比副轴排列多出一个 auto
36+
37+
### 多行 alignContent
38+
默认 flex-start,可选 flex-start,flex-end,center,space-between,space-around
39+
40+
### position
41+
默认 relative,可选 relative,absolute
42+
43+
### flexWrap 折行
44+
默认 nowrap,可选 nowrap,wrap,wrap-reverse
45+
46+
### display 显示
47+
默认 flex,可选 flex,none
48+
49+
### flex 弹性属性
50+
默认 NaN,即 undefined,只能为数字
51+
52+
### flexGrow 弹性扩大属性
53+
默认 0,必须为数字
54+
55+
### flexShrink 弹性缩小属性
56+
**同 flexGrow**
57+
58+
### flexBasis 弹性基础属性
59+
**同 width**
60+
61+
### aspectRatio
62+
默认值 NaN,即 undefined,只能为数字
63+
64+
### direction LTR/RTL
65+
默认值 inherit,可以为 inherit,ltr,rtl
66+
67+
### overflow 超出可见
68+
默认 visible,可选 scroll visible hidden
69+
70+
## Web 标准化
71+
目前的属性很多默认值都是过时属性,未来会改成 CSS 标准一致,比如 flex 主轴方向,会改成 Row

0 commit comments

Comments
 (0)