flex布局

*【注意】*通常情况下，VRender默认并不具备类似DOM的布局，比如在DOM中，你可以写两个div，那么第二个div会放置在第一个div的下方。但如果在VRender中，你写了两个矩形，那么第二个矩形会覆盖在第一个矩形之上。这是因为VRender中所有的定位都是相对定位的，它依靠你配置的x、y等参数定位，坐标系是左上角为原点，向右为x轴正方向，向下为y轴正方向。这就导致了VRender的布局和DOM的布局是不一样的。

但是我们还提供了flex布局的能力，开启该功能之后，我们也可以在VRender中实现类似DOM Flex布局的能力。

使用

VRender中布局的能力是通过插件功能实现的，首先我们需要再stage的参数中开启该插件：

const stage = VRender.createStage({
  container: CONTAINER_ID,
  autoRender: true,
  enableLayout: true, // 开启布局能力
});

开启后场景树的布局依然默认是相对定位进行布局的，依靠配置的x、y以及父元素的相对位置，来确定当前元素的位置。但是我们可以通过给元素配置flex属性来开启flex布局，开启后，子元素就会按照flex布局的规则进行布局。

可配置的属性接口如下，规则和浏览器的Flex布局规则一致

display?: 'relative' | 'inner-block' | 'flex';
flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
flexWrap?: 'nowrap' | 'wrap';
justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
alignItems?: 'flex-start' | 'flex-end' | 'center';
alignContent?: 'flex-start' | 'center' | 'space-between' | 'space-around';

其会根据子元素的AABBBounds的大小来进行布局，你可以通过BoundsPadding来动态调整元素的AABBBounds，来达到你想要的布局效果。相关内容可以参考BoundsPadding。

我们这里给出一个示例演示：

flex布局

使用