flex中HBox,VBox的布局、其中组件的布局 (自动居中)

在 Flex 中，HBox 和 VBox 都是容器，可以用来对子组件进行水平或垂直布局。其中组件的布局可以通过设置各组件的样式来实现。

对于 HBox，子组件会从左到右依次排列，可以通过设置子组件的样式来控制子组件的宽度、高度、间距等属性，比如：

<s:Group>
    <s:HGroup gap="10">
        <s:Button label="Button 1"/>
        <s:Button label="Button 2"/>
        <s:Button label="Button 3"/>
    </s:HGroup>
</s:Group>

上面的代码中，`<s:HGroup>` 标签表示使用 HBox 布局，`gap` 属性表示子组件之间的间隔距离。可以看到，三个 Button 组件会依次横向排列，之间的间隔为 10px。

对于 VBox，子组件会从上到下依次排列，可以通过设置子组件的样式来控制子组件的宽度、高度、间距等属性，比如：

<s:Group>
    <s:VGroup gap="10">
        <s:Button label="Button 1"/>
        <s:Button label="Button 2"/>
        <s:Button label="Button 3"/>
    </s:VGroup>
</s:Group>

上面的代码中，`<s:VGroup>` 标签表示使用 VBox 布局，`gap` 属性表示子组件之间的间隔距离。可以看到，三个 Button 组件会依次纵向排列，之间的间隔为 10px。

如果想让子组件自动居中，可以使用 Flex 提供的布局属性 `horizontalCenter` 和 `verticalCenter`，比如：

<s:Group>
    <s:HGroup horizontalCenter="0" verticalCenter="0">
        <s:Button label="Button 1"/>
        <s:Button label="Button 2"/>
        <s:Button label="Button 3"/>
    </s:HGroup>
</s:Group>

上面的代码中，`horizontalCenter` 和 `verticalCenter` 属性分别表示子组件在水平和垂直方向上的居中对齐。可以看到，三个 Button 组件会水平和垂直居中排列。