Flex Layout Techniques - Part I

From now on I am going add some Flex Layout techniques, with code samples.

1) If you have HBox of some width and wanted to align two controls at each end.

<mx:HBox width="500">
<mx:Button label="Left Button"/>
<mx:Spacer width="100%"/>
<mx:Button label="Right Button"/>
</mx:HBox>


This will align the first button to the left and the second button to the right. There's nothing special about the Spacer, it just extends the UIComponent. It's just a coding trick.

2) If you have Canvas of width and height, how would you align a control to the bottom-right corner. Ofcourse, you can do so by setting the x and y values, which is not the best practice.
If the canvas width and height is dynamic, the x and y values could fail.


<mx:Canvas width="500" height="800">
<mx:Image source="someImage.jpg" width="100" height="100" bottom="10" right="10"/>
</mx:Canvas>

The Image is now set to the bottom-right corner with a padding of 10px on it's sides.
That's simple.. innne...