以前對于Flex網頁布局還不是很明白，基本上沒有什么修飾。但是做完了一個仿“115網盤”的頁面后，對頁面控制有了一個基本的了解，現總結一下。
本人一開始接觸的就是Flex4，據說Flex3的css布局很脊椎，也不知道是不是這樣。但是Flex4的網頁布局很牛X，再配上各種事件，可以實現需要寫很多JavaScript/Ajax代碼才能實現的效果。
好了，言歸正傳。
在Flex4中使用css控制樣式，既可以直接在mxml文件中寫樣式，也可以新建一個css文件在這個文件里寫樣式，更重要的是這樣便于管理。
如果直接在mxml中寫樣式的話，我們可以直接在想要控制的控件里直接寫css元素，比如：left,right,top等。如果要控制的元素非常多的話，這樣是不便于管理的建議寫在一個css文件里。
好了，現在好好說說利用css文件控制樣式。
首先新建一個css文件，這個很簡單，就不多說了。
新建了一個css文件后需要將此文件引用到被控制的mxml文件里，具體如下所示：
<fx:Style source="css文件路徑" />
在css文件里獲得想要控制的對象可以通過在被控制對象里設置id來進行，如控制如下canvas需要設置id：
<mx:Canvas width="98"height="110" id="disk_canvas" />
在css文件里通過“#”獲取，如：
#disk_canvas{
focusColor:#D6E0ED;
top:89;
}
我們也可以像在html設置類來進行，即設置styleName屬性，如：
<mx:Canvas width="98"height="110" styleName="disk_canvas" />
在css文件里通過如下所示的“.”來進行設置：
.disk_canvas{
focusColor:#D6E0ED;
top:89;
}
然后mxml文件中用到和這一樣的樣式時，只需要寫上此styleName就可以了。
總體上就是這樣，但是上述不是很適合在“動態”的狀態下設計樣式，我們可以通過“setStyle”來設置樣式：
id.setStyle(“css屬性”,”css值”);
如下圖當鼠標通過左側的“網盤”時，中間的圖片切換如下所示：
當鼠標經過“消息”時中間的圖片切換如下所示：
不仔細看看，還是挺像的哈！這就是通過事件進行切換的，(*^__^*) …
上述方法很合適在事件中動態的設置樣式。
設置樣式就是這么簡單。在html頁面中我們是通過“div+css”控制樣式，但是在flex中我們可以通過“canvas+css”控制樣式。使用過多的Hbox,Vbox等會影響性能，但是canvas是一個比較小的容器，可以滿足大部分的需求。