Canvas - relative - Flex 3 Getting Started

Canvas container - relative positioning (constraint-based layout)

Anchor the sides or center of a component to positions relative to the component's container.
Size and position of components resize when the user resizes the application window.
The container's layout property must be set to absolute.
All constraints are set relative to the edges of the container, not to other controls in the container.
Left, right, top, bottom, horizontalCenter, and verticalCenter properties are anchors in constraint-based layouts

User rating?	1 2 3 4 5

Photo.mxml

The following example demonstrated positioning children in an absolute-based layout using the top, bottom, left, right, horizontalCenter, and verticalCenter styles.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0">


    <mx:HDividedBox width="100%" height="300">
        <mx:Canvas backgroundColor="#FFFFCC"
            width="150" height="100%">
            <mx:Label text="Adjust this section" left="15" />
        </mx:Canvas>

        <mx:Canvas>
            <mx:Button label="&lt; prev"
                left="10" top="120"/>

            <mx:Image source="animals03.jpg"
                horizontalCenter="0" top="30"/>

            <mx:Label text="Photographed by Elsie Weil"
                horizontalCenter="0" top="250"/>

            <mx:Button label="next &gt;"
                right="10" top="120"/>
        </mx:Canvas>
    </mx:HDividedBox>
</mx:Application>

Resources

Canvas container - relative positioning (constraint-based layout)

Photo.mxml

Rendered Sample