What is the best way to make a multi column form in Flex?

My current solution if more than one column is required is to put the form items inside an <s:HGroup> but the alignment isn't the best.

Is there a better way?

Thank you, Fred

• flex
• flex4
• adobe

I haven't had a chance to really explore the new Spark Form controls, but one thing they do is re-introduce constraint columns and rows. Perhaps they were under-used in Flex 3, but I was sad to see them go in Flex 4.

You should be able to setup some rows and columns to lay the form elements out and keep things aligned between columns this way.

Some Adobe resources:

• The Spark Form, Spark FormHeading, and Spark FormItem containers
• Using constraint rows and columns with MX containers and the Spark FormLayout class

How about using the grid control. Not the same performance as using Hbox/Hgroup but still will do what you need. http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/containers/Grid.html#includeExamplesSummary

<s:VGroup left="10" right="10" top="10" bottom="10">
        <s:Label width="100%" color="blue" 
            text="A 3 by 3 Grid container of Button controls."/>

        <mx:Grid>
            <mx:GridRow>
                <mx:GridItem>
                    <s:Button label="Row 1 Col 1" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 1 Col 2" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 1 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>

            <mx:GridRow>
                <mx:GridItem>
                    <s:Button label="Row 2 Col 1" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 2 Col 2" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 2 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>

            <mx:GridRow>
                <mx:GridItem>
                    <s:Button label="Row 3 Col 1" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 3 Col 2" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 3 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>
        </mx:Grid>
    </s:VGroup>