Yoga
主体部分翻译自
部分参考 阮一峰 Flexbox
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
Yoga
随着这几年前端技术的崛起，作为前端UI骨架的布局系统也在其中占据了越来越重要的位置。不管是在移动端、桌面端还是Web端，特别是不同设备的屏幕大小和分辨率千变万化，如何构建良好的布局系统以便应付这些变化已经变得越来越重要。
目前，各个平台都有自己的一套解决方案。iOS平台有自动布局系统，Android有容器布局系统，而Web端有基于CSS的布局系统。多种布局系统共存所带来的弊端是很明显的，平台间的共享变得很困难，而每个平台都需要专人来开发维护，增加了开发成本。
Facebook在这个问题上没有少下功夫。首先，Facebook在React Native里引入了一种跨平台的基于CSS的布局系统，它实现了Flexbox规范。基于这个布局系统，不同团队终于可以走到一起，一起解决缺陷，改进性能，让这个系统更加地贴合Flexbox规范。
随着这个系统的不断完善，Facebook决定对它进行重启发布，并取名Yoga。Yoga是一个表达性极强的布局库，并没有实现CSS的所有内容。没有支持表、浮动等某些类似的CSS概念。Yoga也不支持对于布局无影响的部分、比如颜色和一些背景属性。Yoga是基于C实现的。之所以选择C，首先当然是从性能方面考虑的。基于C实现的Yoga比之前Java实现在性能上提升了33%。其次，使用C实现可以更容易地跟其它平台集成。到目前为止，Yoga已经有以下几个平台的绑定：Java（Android）、Objective-C（UIKit）、C#（.NET）。而且已经有很多项目在使用Yoga，比如React Native、Components for Android、Oculus，等等。
不同于其它的一些布局框架，比如bootstrap的栅格系统或Masonry，它们要么不够强大，要么不支持跨平台。Yoga遵循了Flexbox规范，同时又将布局元素抽象成Node，为各个不同平台暴露出一组标准的接口，这样不同的平台只需实现这些接口就可以了
Default values
div {
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
flex-shrink: 0;
align-content: flex-start;
border-width: 0px;
margin: 0px;
padding: 0px;
min-width: 0px;
}
Flexbox 概念
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为flex item
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
Item默认沿主轴排列。单个Item占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器属性
FlexDirection 和 direction
flex-direction属性决定主轴的方向（即Item的排列方向）
- Column (默认) 主轴为垂直方向，起点在上沿。
- Row 主轴为水平方向，起点在左端。
- ConlumnRverse 主轴为垂直方向，起点在下沿。
- RowReverse 主轴为水平方向，起点在右端。
JustifyContent
JustifyContent属性定义了Item在主轴上的对齐方式。
JustifyContent 具体对齐方式与轴的方向有关。下面假设主轴为从左到右：
- FlexStart （默认）左对齐
- FlexEnd 右对齐
- Center 居中
- SpaceBetween 两端对齐，Item之间的间隔都相等。
- SpaceAround 每个Item两侧的间隔相等。所以，Item之间的间隔比Item与边框的间隔大一倍。
Flex Wrap
默认情况下，Item都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
- Nowrap 不换行（默认）
- Wrap 换行，第一行在上方。
如果容器指定FlexWrap = Wrap那么它的子视图将换到下一行，而不是溢出。下一行将具有相同的FlexDirection，并会出现沿着横轴旁边的第一线
Alignment 对准
AlignItems属性定义在交叉轴上如何对齐。有4个选项AlignItems：
- Stretch 拉伸（默认）
- FlexStart 交叉轴的起点对齐。
- FlexEnd 交叉轴的终点对齐。
- Center 交叉轴的中间点对齐。
AlignItems = Stretch表示子视图在交叉轴方向上自适应父视图大小。
AlignSelf
AlignSelf和AlignItems有相同的选项和效果，但是是作用于容器内的子视图，此属性将覆盖父视图设置的AlignItems属性。
AlignContent
align-content属性定义了多根轴线的对齐方式。如果Item只有一根轴线，该属性不起作用。有6个选项：
- FlexStart （默认）与交叉轴的起点对齐
- FlexEnd 与交叉轴的终点对齐。
- Center 与交叉轴的中点对齐。
- Stretch 轴线占满整个交叉轴。
- SpaceBetween 与交叉轴两端对齐，轴线之间的间隔平均分布。
- SpaceAround 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
见代码
Item属性
FlexGrow
flex-grow属性定义Item的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有Item的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个Item的flex-grow属性为2，其他Item都为1，则前者占据的剩余空间将比其他项多一倍。
FlexShrink
flex-shrink属性定义了Item的缩小比例，默认为1，即如果空间不足，该Item将缩小。
如果所有Item的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个Item的flex-shrink属性为0，其他Item都为1，则空间不足时，前者不缩小。
负值对该属性无效。
FlexBasis
flex-basis属性定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸。main-size值使它具有匹配的宽度或高度，不过都需要取决于flex-direction的值。如果设置为0，内容不在考虑周围额外空间。如果设置为auto，额外空间会基于flex-grow值做分布。和FlexDirection = row 时设置width或者FlexDirection = column时设置height效果差不多。
Absolute positioning
Position 属性告诉flexbox item在container中的位置，有两种:
-
Relative(default) 相对布局 -
Absolute绝对布局
Position = Absolute 时候有6个属性：
-
Left- -
Top- -
Right- -
Bottom- -
Start- x -
End- container.width-item.maxX
Margin, Padding
Margin:外边距 padding:内边距
AspectRatio 纵横比
AspectRatio = 交叉轴方向长度/主轴方向长度
- 设置width后AspectRatio控制height.
- 设置height后AspectRatio控制width.
- 设置FlexBasis后AspectRatio控制item的交叉轴范围.
- 设置item为Stretch(拉伸)、主轴未定义则AspectRatio控制item主轴范围.
- item设置FlexGrow或FlexShrink后若交叉轴范围未定义则 AspectRatio控制交叉轴范围 .
- 如果item两个范围都定义，则AspectRatio被忽略
和Flexbox的区别点
Yoga是flexbox的子集，有些属性改动：
- zIndex 不支持
- Order 不支持 。order属性已经被框架定义
- Visibility 不支持,换用visible。 collapse和hidden不支持
- wrap属性只有 wrap和nowrap，不支持 wrap-reverse
- margin不能设置为auto 必须设置为像素值，默认0
- baseline不支持
- width, maxWidth, minWidth, height, maxHeight and minHeight 必须是像素值，不支持百分比
- 不可强制破坏布局
- 不支持垂直行内方向，比如纵向文本
- 说明上默认flexDirection是row 算法中默认是column
