So here’s what I came up with. This is a Canvas that not only gets its position and dimension properties from its CSS declaration, but gives the same flexibility to its children.

package view.containers
{
/* inspired by http://www.craftymind.com/2008/03/31/hacking-width-and-height-properties-into-flexs-css-model

This is a canvas that allows for the properties width, height, etc (see the properties array) to be set
through the component’s CSS file.
*/

import mx.containers.Canvas;
import mx.core.IUIComponent;
import mx.core.UIComponent;

public class CanvasExt extends Canvas
{
private static const properties : Array = [”width”, “height”, “percentWidth”, “percentHeight”, “x”, “y”, “visible”];

public function CanvasExt()
{
super();
}

override public function styleChanged(styleProp:String):void
{
super.styleChanged(styleProp);
if(!styleProp || styleProp == “styleName”)
{
//if runtime css swap or direct change of stylename
updateProperties(this);
for ( var i : int = 0; i < numChildren; i++ )
{
var child : UIComponent = UIComponent ( getChildAt ( i ) );
updateProperties ( child );
}
}
}

private function updateProperties(obj:UIComponent):void
{
for each (var item:String in properties)
{
var prop:Object = obj.getStyle(item);
if(prop != null)
obj[item] = prop;
}
}
}
}