NOTE: See FlexLayouts for all your custom Flex 4 layout needs, and FlowLayout for the latest version.

Another one of my favorite improvements that found its way into Flex 4 is the separation of layouts from containers. The fact that layouts can customized and simply plugged into any container is pretty sweet. It’s a real developer benefit because it makes me faster. I can quickly develop a custom component by leveraging a stock layout. Alternately, I can develop a “new” component by creating a custom layout and plugging it into a stock container.

Layout References

Here’s a short list of useful Flex 4 layout references I was able to dig up. If you have anything to add, please leave a comment, and I’ll update this list.

• Easy Flex – Evtim’s blog (one of Adobe’s layout engineers)
• Spark Layouts in Flex 4 – various iterations on the Flow layout by Evtim
• Flex 4 Custom Layouts – a nice circular layout
• 5 3D Layouts for Flex 4 – an awesome collection of 3D layouts

My FlowLayout

I started with Evtim’s FlowLayout and made a few modifications of my own. I added a single gap parameter that controls both the horizontal and vertical separation of elements, and a border parameter that controls the padding around the outside of all the elements. The other major difference is how my version of the Flow layout handles the very first element.

I make sure the first element (when i = 0) is never shifted down, with a simple if (i > 0) check:

//does the element fit on this line, or should we move to the next line?
if (x + elementWidth > containerWidth) {
    //start from the left side
    x = _border;
 
    //move to the next line, and add the gap
    if (i > 0) { //never shift the first element down
        y += elementHeight + _gap;
    }
}

Here it is (view source enabled):

Files

• FlowLayoutSimple (download)

NOTE: All code was built with Flash Builder 4 Beta 1.