flex - automatic layout adjustment to varying browser window size -

in flex4/mxml, have bunch of elements textfields, buttons or else. want place them horizontally next each other. cases browser window or screen resolution small such not of them fit horizontally, want layout automatically shifts superfluous elements row below.

in other words, need layout comprises both, horizontal , vertical layouting, whereas horizontal has priority on vertical. simple layout, yet i'm unable find solution. how can achieve that?

for example, following 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 labels , buttons next each other horizontally, , if screen size small, right items exceed right screen border, want them appear below on left in second row.

in addition, less important, want labels , buttons centered if screen size bigger necessary. that's horizontalalign="center" , textalign="center" meant for.

you should able use tile element. automatically wraps elements new line if screen isn't wide enough 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>