Yoga：跨平台 Flexbox 布局引擎，Facebook 出品

做前端开发的人，大多听过 Flexbox。但 Flexbox 不只是 CSS 属性，它本质上是一套布局算法。Facebook 把这套算法单独抽出来，做成了一个独立的 C++ 库，叫 Yoga。

目前 Yoga 在 GitHub 上有 18,785 个 Star，已经被用在 React Native、Litho（Facebook 的 Android UI 框架）等项目里。它的定位很明确：给需要 Flexbox 布局能力的跨平台框架提供底层支持。

它到底解决什么问题

跨平台开发有个老问题：不同平台的布局系统不一样。iOS 用 Auto Layout，Android 有自己的布局体系，Web 用 CSS。如果你想写一套代码跑在多个平台上，布局层必须统一。

Yoga 的做法是把 Flexbox 算法用 C++ 实现一遍，然后给各个语言写绑定。目前官方支持的绑定包括：

• Java（Android 用）
• Objective-C/Swift（iOS 用）
• JavaScript（Node.js 和 WebAssembly 场景）
• C#（.NET 平台）

这样各平台的 UI 框架都可以调用同一套布局引擎，算出来的结果一致。不用每个平台自己实现一遍 Flexbox，也不用担心各平台行为不统一。

为什么用 C++

Yoga 主要用 C++ 20 写的，构建工具是 CMake。选 C++ 的原因很直接：性能和可移植性。

布局计算在 UI 渲染里是高频操作，每次界面变化都可能触发重新布局。C++ 的执行效率在这种场景下有明显优势。而且 C++ 编译后可以跑在几乎任何平台上，不需要运行时环境。

如果你不想自己编译，Yoga 已经被收录进 vcpkg，可以直接用包管理器安装。

测试方式有点意思

Yoga 的测试不是手写的，而是自动生成的。流程是这样的：先写 HTML 片段描述节点结构，然后在 Chrome 里渲染，Chrome 会根据 CSS Flexbox 规范算出期望的布局结果，这个结果就变成测试用例的预期值。

比如你写一个这样的 HTML：

<div id="my_test" style="width: 100px; height: 100px; align-items: center;">
  <div style="width: 50px; height: 50px;"></div>
</div>

Chrome 渲染后会告诉你子元素应该在什么位置，Yoga 自己算一遍，两者对比就知道对不对。

这种做法的好处是测试覆盖面广，而且跟浏览器的标准实现保持一致。新增测试也很方便，写个 HTML 片段就行。

实际使用场景

Yoga 最大的用户是 React Native。React Native 需要在 iOS 和 Android 上都支持 Flexbox 布局，底层就是靠 Yoga 来算的。你在 React Native 里写 flexDirection: 'row'、justifyContent: 'center'，最终都是 Yoga 在做计算。

除了 React Native，Facebook 自己的 Android UI 框架 Litho 也用 Yoga。还有一些独立的跨平台框架，比如微软的 React Native Windows，同样依赖 Yoga。

如果你在做一个需要 Flexbox 布局的跨平台项目，Yoga 值得一看。它不是那种大而全的 UI 框架，就是一个专注做布局计算的库。接入成本不高，文档里有构建和调试的说明，VSCode 也配好了调试配置。

局限性

Yoga 只做布局计算，不管渲染。你需要自己把布局结果画到屏幕上。另外它支持的是 Flexbox 子集，不是完整的 CSS 布局系统，Grid 布局之类的它不管。

总的来说，Yoga 是一个定位清晰的基础设施库。不花哨，但实实在在解决了一个跨平台开发的共性问题。

之类的它不管。

总的来说，Yoga 是一个定位清晰的基础设施库。不花哨，但实实在在解决了一个跨平台开发的共性问题。