本教程将介绍Unity的UI Toolkit工具包的基于Flexbox的布局。
什么是Flexbox？
Flexbox是一种CSS功能，可以以一种很好的方式对齐和布局多个UI，UI Toolkit的布局系统基于这个Flexbox概念。
下面总结了UI Toolkit中Flexbox相关的设置项以及使用方法。
创建操作确认布局
首先，在本文中创建一个布局来检查每个属性的操作，使用UI Builder创建如下所示的布局：
放置一个父VisualElement，并在其下创建三个VisualElement，大小为100 x 100，
所有子VisualElements都将flex -grow设置为零，适当设置其他填充等。
对齐方向
Flex Direction（对齐方向）可以指定子视觉元素对齐的方向，它可以从视口中的标题或检查器中设置，如下所示：
默认设置为column（栏）。
如果将其设置为column-reverse，它将从下到上布局，如下图所示：
将其设置为行将从左到右布局。
将其设置为row-reverse将从右到左布局。
Flex Wrap（弹性包裹）
Flex Wrap是一种环绕设置，默认值为nowrap，不换行，如果所有元素都不适合一行，它们将缩小或溢出以适合（flex-shrink行为将根据其他设置而改变）。
如果设置为wrap，如果不合适就会换行。
如果设置为wrap-reverse，它将换行并在上面添加一个新行。
Flex Grow和Flex Shrink
Flex Grow和Flex Shrink有点特殊，可以参阅下面的站内文章参阅。
对齐项目和对齐自身
可以通过将Align Items设置为父VisualElement来指定子视觉元素的对齐方式，它可以从视口中的标题或检查器中设置，如下所示：
例如，如果方向设置为水平，可以对齐到顶部、中心或底部。
还有一个名为Stretch的设置，它是一个设置，当子元素的高度设置为auto时，如下图所示，根据父元素的大小拉伸子元素。
通过像这样在父VisualElement中设置Align Items，可以指定子VisualElement的对齐方式。
另一方面，如果只想更改特定子项的对齐方式，请设置子项的Align Self属性。
设置此项可以覆盖每个子VisualElement的对齐设置。
证明内容
与Align Items一样，Justify Content也是一个属性，用于通过在父视觉元素上设置来指定子视觉元素的对齐方式。
但是，Justify Content控制沿主轴的对齐方式，如果Direction设置为横向，则为水平对齐，可以从视口中的标题或检查器中完成设置，如下图所示：
默认值为flex-start，如果方向为column，则右对齐。
这时center会将其对齐到中心。
flex-end，如果这样做，它是右对齐的。
space-between，元素之间的间距将相同。
space-around，每个元素的左右边距均匀分布。
位置
如上所述，当想要从基于Flexbox布局的结果确定的坐标稍微移动时，请使用Position。
此外，将Position从Relative切换为Absolute会从基于Flexbox的对齐方式中删除元素。如有需要可参阅站内文章。
…
以上是3D天堂关于UI Toolkit基于Flexbox布局的基础内容，如果你有任何反馈，请随时在本页面下方留言。