FlexLayouts

RectangleLayout is a custom layout that arranges visual components in a rectangle along the inside border of their parent container. For example, RectangleLayout could be used to arrange the tiles of a board game like Monopoly (but you’d need to set rotateElements="true").

Usage

<s:Group>
    ...
    <s:layout>
        <s:RectangleLayout horizontalGap="2" verticalGap="6" rotateElements="true" />
    </s:layout>
</s:Group>

Params

horizontalGap

The horizontal space between the items in pixels.

verticalGap

The vertical space between the items in pixels.

rotateElements

If true, then all elements in the layout will be rotated to point outwards. If false (the default), then the elements are un-rotated (aka they all point upwards).

Sample

NOTE: watch what happens as you move the num boxes slider.

full screen | view source | download

More Samples

Author

Layout & sample by Justin.