Flex Container with Variable Elements

Question

I need to display a horizontal list of images using Flex. I cannot use horizontal TileList because all tiles end with the size of the first element. Is there a flexible control that will allow me to have elements of different sizes?

Edit: The item list is perfect for the data provider. Unfortunately, the control in Chetan Sastry only responds to the support of data providers if the elements have a fixed width.

Answer 1

Here's a code segment where I do what I think you are describing. Images are of various sizes, but this displays them in a square grid. The trick (at least for my requirements) is to set the height and minWidth for the container that goes into each cell.

<mx:TileList id="imgTiles" width="100%" height="100%"  
      paddingTop="2" paddingBottom="2" paddingLeft="2" paddingRight="2"  
      itemClick="eTilesClick(event)">     
    <mx:itemRenderer>  
        <mx:Component>  
            <mx:VBox horizontalAlign="center"  
                   height="250" minWidth="150"  
                   horizontalScrollPolicy="off" verticalScrollPolicy="off"  
                   borderColor="#D2D2D2" borderThickness="1"
                   borderStyle="solid">
                <mx:Label text="{data.imageCaption}" height="15" fontSize="10" fontWeight="bold"/>
                <mx:Image source="{data.thumbnailUrl}" width="100%"/>
            </mx:VBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:TileList>

Answer 2

How about HBox with Repeater for your images?