Obtaining the functionality of Flex Tile Container in HTML

Question

The Flex tile containers will create and remove tiles as the data changes and seems good to use in areas where the content is dynamic. How to implement this functionality in HTML? I guess that we need to use some JS and/or CSS. Any inputs?

Answer 1

You can ignore CSS altogether (for layout) and do this the same way that flex implements it. Without providing code itself, here's the basic idea (assuming horizontal layout):

1. When you add a child, add it to the right of the previous sibling. (c.y = s.y+s.width).
2. Check if current child exceeds the width of the parent. (c.y + c.width > p.width). If so, drop it to the next "row".

Of course, things get more complicated depending on whether you want to do a TileContainer or a FlowContainer. Should the layout look like a grid, or should it be more organic like paragraph wrapping? (if all you want it paragraph wrapping, I think making everything "float:left" will do that for you, but correct me if I'm wrong.). Assuming the TileContainer idea, you just need to iterate over all the children and make sure they have the same height/width (== max child height, max child width), and then do the layout steps mentioned above. You may want to place each child in a container div for easier control of elements that don't resize nicely.

And lastly, just make sure you listen for any window resize events so you can run your layout algorithm.

Check out the algorithms in "TileBase.as" in Flex if you want tips, but it might be easier just to roll your own.