title: Flex newbie on using HGroup and VGroup to control layout
body: <p>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.</p>
  
  <p>It should look something like:</p>
  
  <pre><code>button button                     button button                   button button
  button button button button button button
  </code></pre>
  
  <p>But the code produces no difference between the two rows. Can anyone help me understand how to control the layout like I'm intending?</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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"&gt;
  
  &lt;s:VGroup top="20" left="20" right="20"&gt;
  
      &lt;s:HGroup top="20" left="20" right="20"&gt;
  
          &lt;s:Button label="row1 left1"/&gt;
          &lt;s:Button label="row1 left2"/&gt;
  
          &lt;s:HGroup  horizontalAlign="center"&gt;
              &lt;s:Button label="row1 middle1"/&gt;
              &lt;s:Button label="row1 middle2"/&gt;
          &lt;/s:HGroup&gt;
  
          &lt;s:HGroup right="20"&gt;
              &lt;s:Button label="row1 right1"/&gt;
              &lt;s:Button label="row1 right2"/&gt;
          &lt;/s:HGroup&gt;
  
      &lt;/s:HGroup&gt;
  
      &lt;s:HGroup top="50" left="20"&gt;
          &lt;s:Button label="row2 left1"/&gt;
          &lt;s:Button label="row2 left2"/&gt;
          &lt;s:Button label="row2 middle1"/&gt;
          &lt;s:Button label="row2 middle2"/&gt;
          &lt;s:Button label="row2 right1"/&gt;
          &lt;s:Button label="row2 right2"/&gt;
      &lt;/s:HGroup&gt;
  
  &lt;/s:VGroup&gt;
  
  &lt;/s:Application&gt;
  </code></pre>
  
  <p>UPDATE: Based on Dom's answer below, here's the correct code for what I was intending:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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"&gt;
  
  &lt;s:HGroup left="20" right="20" top="20"&gt;
      &lt;s:HGroup&gt;
          &lt;s:Button click=""/&gt;
          &lt;s:Button click=""/&gt;
      &lt;/s:HGroup&gt;
      &lt;s:Spacer width="100%"/&gt;
      &lt;s:HGroup&gt;
          &lt;s:Button click=""/&gt;
          &lt;s:Button click=""/&gt;
      &lt;/s:HGroup&gt;
      &lt;s:Spacer width="100%"/&gt;
      &lt;s:HGroup&gt;
          &lt;s:Button click=""/&gt;
          &lt;s:Button click=""/&gt;
      &lt;/s:HGroup&gt;
  &lt;/s:HGroup&gt;
  &lt;s:VGroup left="20" right="20" top="50"&gt;
      &lt;s:HGroup width="100%"&gt;
          &lt;s:Button click=""/&gt;
          &lt;s:Button click=""/&gt;
          &lt;s:Button click=""/&gt;
          &lt;s:Button click=""/&gt;
          &lt;s:Button click=""/&gt;
          &lt;s:Button click=""/&gt;
      &lt;/s:HGroup&gt;
  &lt;/s:VGroup&gt;
  
  &lt;/s:Application&gt;
  </code></pre>