Yoga

主体部分翻译自

https://facebook.github.io/yoga/docs

部分参考 阮一峰 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

img

容器默认存在两根轴：水平的主轴（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