导读：近几年，随着软件开发的革新，在前端基础之上衍生出了大前端概念，通俗的讲就是所有UI统称大前端，如H5、android、ios。这一切的变革，其实都是为了提高生产力，各大科技巨头在这方面做了大量研究，输出了大量的开源框架及工具。本文讲来讲下跨平台flex引擎yogalayout，帮助读者全面的了解下她，最好能够用在自己的项目上。

使用场景

yogalayout是一个通用flex排版框架，支持了android、iOS、javascript。下面的场景，我相信很多人都或多或少用到过。

react native：这个框架，我相信大家都不陌生，好多人都使用过。没错，她的布局引擎就是用的yogalayoutComponentkit：这个是受React的启发，使用yogalayout作为底层实现的iOS UI框架Litho：这个是受React的启发，使用yogalayout作为底层实现的android声明式UI框架为什么是yogalayout

在13年左右，React开始诞生后，facebook就在为react的通用做准备。由于flex布局的便捷和流行，因此yogalayout诞生了（14年），随着yogalayout的成熟，react native应运而生，逐渐支持了ios、android，我记得当时15、16年，react native市场的火爆，很多培训视频在网上流传，引发了学习热潮，不亚于目前的flutter学习热潮。

特性

那么究竟yoga实现了什么呢，我们来一起看下他的特性（学过web的flex布局，应该很好理解）

position：相对于父元素的位置RELATIVE：默认布局，即默认按照正常的布局流ABSOLUTE：绝对布局，必须配合top, right, bottom, left使用Align Content：内容对齐方式（垂直）FLEX START (DEFAULT)： 容器横轴的起点（最左端）FLEX END：容器横轴的末端（最右端）STRETCH：自动拉伸横轴所在的高度CENTER：容器横轴的中心SPACE BETWEEN：容器两端平均剩余空间SPACE AROUND：容器均匀留白Align Items：对齐项STRETCH (DEFAULT) ：同上FLEX START：同上FLEX END ：同上CENTER：同上BASELINE：与容器的儿子在同一基准线上Align Self：自己对齐，同Align ItemsAspect Ratio：纵横比Flex Direction：flex布局方向ROW：按行排列COLUMN：按列排列ROW REVERSE：按行从右到左排列COLUMN REVERSE：按列从下往上排列Flex Wrap：flex换行方式Justify Content：内容对齐方式（水平），同Align ContentMargins, Paddings, and Borders：常规的边距设置

因为是flex引擎，所以常用的flex属性这里都做了支持。

下面我们来看看具体案例

实际案例Litho

final ComponentContext c = new ComponentContext(this);final Component component = Text.create(c)  .text("Hello World")  .textSizeDip(50)  .build();setContentView(LithoView.create(c, component));

React Native

import React from 'react';import { Text, View } from 'react-native';export default function YourApp() {  return (    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>      <Text>        Try editing me!       </Text>    </View>  );}

总结

yogalayout是facebook实现的引擎，从14年开始一直不断的维护，我从android开发到ios开发，在到react开发，一路过来感受到了flex的强大与便捷，最近我还在思考，是否能够让android、ios有react的开发体验（当然除了Jetpack Compose、Swift UI），接下来我打算用yoga做个尝试，有兴趣的可以一起交流交流。