[flexcoders] Simple Layout Question

[Rich Christiansen]

Hey all,

I just recently started working with Flex (3), and I've got a simple 
layout question.

I've got a bunch of components inside of a vbox, and I've noticed that 
the vbox positions them so they are all at the same x coordinate.  How 
can I change the x-position (e.g. the indentation) of the components?

Here's some test code I've been fiddling with:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";>

   <mx:VBox backgroundColor="0xff0000">
       <mx:HBox backgroundColor="0x00ff00">
           <mx:Button label="Test 1"/>
           <mx:Button label="Test 1"/>
           <mx:Button label="Test 1"/>
           <mx:Button label="Test 1"/>
       </mx:HBox>

       <mx:Canvas backgroundColor="0x0000ff" >
           <mx:Button label="Test 2"/>
       </mx:Canvas>

       <mx:Button label="Test 3" />
   </mx:VBox>
  
</mx:Application>

How can I make it so that the blue and red buttons are indented, say, 50 
pixels?  I've already tried fiddling with the 'left' and 'paddingLeft' 
attributes with little success... :/

Any thoughts?  This has got to be possible with VBox, but I can't seem 
to figure it out...

Thanks,
-Rich