In Flex4/mxml, I have a bunch of elements like TextFields, Buttons or anything else. I want to place them horizontally next to each other. But for cases where the browser window or screen resolution is too small such that not all of them fit horizontally, I want a layout which automatically shifts the superfluous elements to the row below.
In other words, I need a layout which comprises both, horizontal and vertical layouting, whereas horizontal has priority over vertical. So actually a very simple layout, yet I'm unable to find a solution. How can I achieve that?
For example, the following is a starting point:
<mx:HBox horizontalGap="0" width="{width-30}" horizontalAlign="center" textAlign="center">
<mx:Label paddingLeft="10" text="anytext1" />
<mx:Label id="warn12" text="anytext2" />
<mx:Button label="Do Something1" click="{cf.doSomething(1)}"/>
<mx:Label paddingLeft="0" text="anytext3" />
<mx:Button label="Do Something2" click="{cf.doSomething(2)}"/>
</mx:HBox>
The HBox places all Labels and Buttons next to each other horizontally, and if the screen size is too small, the right most items exceed the right screen border, but I want them to appear below on the left in a second row.
In addition, but less important, I want the Labels and Buttons to be centered if the screen size is bigger than necessary. That's what the horizontalAlign="center" and textAlign="center" are meant for.
You should be able to use a Tile element. It automatically wraps elements to a new line if the screen isn't wide enough to accommodate everything:
<mx:Tile id="myFlow"
direction="horizontal" width="{width-30}"
paddingTop="0" paddingBottom="0"
paddingRight="0" paddingLeft="0"
verticalGap="0" horizontalGap="0">
<mx:Label paddingLeft="10" text="anytext1" />
<mx:Label id="warn12" text="anytext2" />
<mx:Button label="Do Something1" click="{cf.doSomething(1)}"/>
<mx:Label paddingLeft="0" text="anytext3" />
<mx:Button label="Do Something2" click="{cf.doSomething(2)}"/>
</mx:Tile>