Question

I’m trying to learn Flex layout using VGroup and HGroup. As a simple exercise, I want to control the pixel-placement of button pairs. The code below attempts to place 3 pairs of buttons each in two rows. For example, the first row has a button pair 20 pixels from the top and left; another button pair 20 pixels from the top and centered; and another button pair 20 pixels from the top and right. The 2nd row has just all the buttons aligned 20 pixels to left.

It should look something like:

button button                     button button                   button button
button button button button button button

But the code produces no difference between the two rows. Can anyone help me understand how to control the layout like I’m intending?

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" 
           minHeight="600">

<s:VGroup top="20" left="20" right="20">

    <s:HGroup top="20" left="20" right="20">

        <s:Button label="row1 left1"/>
        <s:Button label="row1 left2"/>

        <s:HGroup  horizontalAlign="center">
            <s:Button label="row1 middle1"/>
            <s:Button label="row1 middle2"/>
        </s:HGroup>

        <s:HGroup right="20">
            <s:Button label="row1 right1"/>
            <s:Button label="row1 right2"/>
        </s:HGroup>

    </s:HGroup>

    <s:HGroup top="50" left="20">
        <s:Button label="row2 left1"/>
        <s:Button label="row2 left2"/>
        <s:Button label="row2 middle1"/>
        <s:Button label="row2 middle2"/>
        <s:Button label="row2 right1"/>
        <s:Button label="row2 right2"/>
    </s:HGroup>

</s:VGroup>

</s:Application>

UPDATE: Based on Dom’s answer below, here’s the correct code for what I was intending:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" 
           minHeight="600">

<s:HGroup left="20" right="20" top="20">
    <s:HGroup>
        <s:Button click=""/>
        <s:Button click=""/>
    </s:HGroup>
    <s:Spacer width="100%"/>
    <s:HGroup>
        <s:Button click=""/>
        <s:Button click=""/>
    </s:HGroup>
    <s:Spacer width="100%"/>
    <s:HGroup>
        <s:Button click=""/>
        <s:Button click=""/>
    </s:HGroup>
</s:HGroup>
<s:VGroup left="20" right="20" top="50">
    <s:HGroup width="100%">
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
    </s:HGroup>
</s:VGroup>

</s:Application>

Answer 1

I see two options:

1: dont use HGroup’s

2: use HGroup’s and space the items with

<s:Spacer width="x"/>

where x can be a % or exact pixels.

edit: properly formatted my answer so that s:spacer showed

edit 2: added code below:

<s:VGroup width="100%" height="100%">
    <s:HGroup width="100%">
        <s:HGroup>
            <s:Button click=""/>
            <s:Button click=""/>
        </s:HGroup>
        <s:Spacer width="100%"/>
        <s:HGroup>
            <s:Button click=""/>
            <s:Button click=""/>
        </s:HGroup>
        <s:Spacer width="100%"/>
        <s:HGroup>
            <s:Button click=""/>
            <s:Button click=""/>
        </s:HGroup>
    </s:HGroup>
    <s:HGroup width="100%">
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
    </s:HGroup>
</s:VGroup>

That will look exactly like your example above.