Problem
You want to lay out the children of a container so that they flow left to right and onto a new row when as necessary.
Solution
Use the FlowBox container from FlexLib. Alternatively, implement your own Flow container using the FlowLayout implementation in FlexLib as a guide.
Detailed explanation
The FlexLib project, which provides community-contributed open source flex 2 components, now includes a FlowBox that uses a FlowLayout algorithm to determine where children are positioned.
An example application using the FlowBox container can be found here. The source for the sample can be found here. The main FlowLayout algorithm can be found here. The latest version of FlexLib can be downloaded from here.
You use the FlowBox in the exact same way that you use a regular Box container:
An example application using the FlowBox container can be found here. The source for the sample can be found here. The main FlowLayout algorithm can be found here. The latest version of FlexLib can be downloaded from here.
You use the FlowBox in the exact same way that you use a regular Box container:
<flexlib:FlowBox width="250" height="250">
<mx:Button label="Button"/>
<mx:TextInput />
<mx:Label text="Label" />
<mx:Button label="Another Button"/>
<mx:Button label="Button With a Longer Label"/>
<mx:Label text="Some Label" />
<mx:HBox backgroundColor="#FF0000" height="50" width="10" />
<mx:Label text="Some Other Label" />
<mx:Label text="Hello" color="#FF0000"/>
</flexlib:FlowBox>
Internally, the FlowLayout used by FlowBox will place the children in left to right order. When the next child being placed would take up more width than the container has been given, that child is placed at the beginner of the next row underneath. The layout process repeats until there are no more children left.
Report abuse
