Flex: Another newbie layout issue using Group, HGroup, and VGroup - apache-flex

Question

If you run the following mxml code, you'll see the MyLabel1 is sitting higher than the other labels (e.g. MyLabel2) and other items on the 2nd row.
How to change the code so MyLabel1 sits in-line with MyLabel2, etc?
Note that any changes need to keep the group of MyLabel2, MyLabel3, and MyButton3 to be equally spaced between MyLabel1 (on the left) and MyLabel4 (on the right), as it is now. In other words, this middle group on the 2nd row is NOT centered in the container, but has equal space on it's left and right.
<?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="200" minHeight="300">
<s:VGroup top="10" left="20" right="20">
<s:Group width="100%">
<s:HGroup left="0" top="5" verticalAlign="baseline">
<s:Label text="Some Text Here" />
</s:HGroup>
<s:HGroup right="0" verticalAlign="baseline">
<s:Button label="Button1" width="65"/>
<s:Button label="Button2" width="65"/>
</s:HGroup>
</s:Group>
<s:Spacer height="2"/>
<s:HGroup width="100%" >
<s:HGroup >
<s:Label text="MyLabel1"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="baseline">
<s:Label text="MyLabel2"/>
<s:Label text="MyLabel3"/>
<s:Button label="MyButton3" width="85"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="baseline">
<s:Label text="MyLabel4"/>
<s:TextInput id="myID" />
</s:HGroup>
</s:HGroup>
</s:VGroup>

Answer 1

Try:
set the three hgroup verticalAlign to middle so the item contained are positioned in the middle of the height of the component...
then you need to specify an height for the three hgroup because:
- in the first there is only a label (with a certain height)
- in the others two there are a button and a textinput that has a greater height than the simple label (hgroup 1)
Using a custom height for the group override the height set by the inner components
<s:VGroup top="10" left="20" right="20">
<s:Group width="100%">
<s:HGroup left="0" top="5" verticalAlign="baseline">
<s:Label text="Some Text Here" />
</s:HGroup>
<s:HGroup right="0" verticalAlign="baseline">
<s:Button label="Button1" width="65"/>
<s:Button label="Button2" width="65"/>
</s:HGroup>
</s:Group>
<s:Spacer height="2"/>
<s:HGroup width="100%" >
<s:HGroup verticalAlign="middle" height="25">
<s:Label text="MyLabel1"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="middle" height="25">
<s:Label text="MyLabel2"/>
<s:Label text="MyLabel3"/>
<s:Button label="MyButton3" width="85"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="middle" height="25">
<s:Label text="MyLabel4"/>
<s:TextInput id="myID" />
</s:HGroup>
</s:HGroup>
</s:VGroup>

Answer 2

Just add verticalAlign="baseline" to most outer HGroup.
<?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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup top="10" left="20" right="20">
<s:Group width="100%">
<s:HGroup left="0" top="5" verticalAlign="baseline">
<s:Label text="Some Text Here" />
</s:HGroup>
<s:HGroup right="0" verticalAlign="baseline">
<s:Button label="Button1" width="65"/>
<s:Button label="Button2" width="65"/>
</s:HGroup>
</s:Group>
<s:Spacer height="2"/>
<s:HGroup width="100%" verticalAlign="baseline" >
<s:HGroup>
<s:Label text="MyLabel1"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="baseline">
<s:Label text="MyLabel2"/>
<s:Label text="MyLabel3"/>
<s:Button label="MyButton3" width="85"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="baseline">
<s:Label text="MyLabel4"/>
<s:TextInput id="myID" />
</s:HGroup>
</s:HGroup>
</s:VGroup>
</s:Application>